如何只在新值无效时将先前的值分配给我的日期选择器状态?

huangapple go评论72阅读模式
英文:

How can I only assign a previous value to state of my datepicker if the new one is invalid?

问题

我正在处理我正在使用的库中的一个错误,有时会创建无效的值,导致我的代码崩溃。我只想在新值(useDateRangePickerState的结果)有效时应用它。如果无效,我不想将该值分配给我的状态。我该如何做?

export const DateRangePicker: FC<AriaDateRangePickerProps<DateValue>> = memo((props) => {

  const defaultNowTime = {timeValue};
  const [nowTime, setNowTime] = useState(defaultNowTime);

  const newstate = useDateRangePickerState({
    ...props,
    defaultValue: {
      start: defaultNowTime.set({ second: 0, minute: 0, millisecond: 0, hour: 0 }),
      end: defaultNowTime
    },
    hideTimeZone: true,
    shouldCloseOnSelect: false,
  });

  // 一旦创建了有效的 'newstate',是否可以在此处使用 useMemo 缓存它?
  // cachedOldState = ...
  // 只有在它有效时才使用它来分配状态! *******************
  const state = (newstate 有效) ? newstate : cachedOldState
...

请注意,我用括号中的"newstate 有效"表示如果newstate是有效的话,你可以使用它来分配状态。 "cachedOldState" 部分似乎需要根据你的需求进一步完善。

英文:

I am dealing with a bug in a library I'm using that will sometimes create invalid values that my code will need, crashing the page. I would like to only apply that new value (the result of useDateRangePickerState) if it is valid. If not, I do not want to assign that value to my state. How can I do this?

export const DateRangePicker: FC&lt;AriaDateRangePickerProps&lt;DateValue&gt;&gt; = memo((props) =&gt; {

  const defaultNowTime = {timeValue}
  const [nowTime, setNowTime] = useState(defaultNowTime);

  const newstate = useDateRangePickerState({
    ...props,
    defaultValue: {
      start: defaultNowTime.set({ second: 0, minute: 0, millisecond: 0, hour: 0 }),
      end: defaultNowTime
    },
    hideTimeZone: true,
    shouldCloseOnSelect: false,
  });

  //once a valid &#39;newstate&#39; is created, cache it with useMemo here?
  //cachedOldState = ...
  //only use the valid to assign state if its valid! *******************
  const state = (newstate is valid) ? newstate : cachedOldState
...

答案1

得分: 0

以下是已翻译的内容:

If the useDateRangePickerState hook part is something that you control then you will want to stop invalid values there before they bubble up. But if it's part of the buggy library then you can make it work.

You've got the right idea here:

//一旦创建了有效的 'newstate',是否可以在这里使用 useMemo 缓存它?
//cachedOldState = ...
//仅在状态有效时使用它来分配状态! *******************
const state = (newstate is valid) ? newstate : cachedOldState

We need to store the previous valid state somewhere. I would use a useState for that.

Then we need to check changes from the date picker and see if they are valid. I recommend a useEffect hook with a dependency on the newstate. This will run every time that the newstate changes.

If the newstate is valid we will call setState and that way we keep our "previous valid state" value in sync.

const newstate = useDateRangePickerState({ /* ... */ });

const [validDate, setValidDate] = useState(initialValue);

useEffect(() => {
   if (isValid(newstate)) {
       setValidDate(newstate);
   }
}, [newstate]);

As a sidenote, I'm really confused by the code in your question. defaultNowTime is stored in state so isn't it a mutation of state to call defaultNowTime.set in the defaultValue?

英文:

If the useDateRangePickerState hook part is something that you control then you will want to stop invalid values there before they bubble up. But if it's part of the buggy library then you can make it work.

You've got the right idea here:

//once a valid &#39;newstate&#39; is created, cache it with useMemo here?
//cachedOldState = ...
//only use the valid to assign state if its valid! *******************
const state = (newstate is valid) ? newstate : cachedOldState

We need to store the previous valid state somewhere. I would use a useState for that.

Then we need to check changes from the date picker and see if they are valid. I recommend a useEffect hook with a dependency on the newstate. This will run every time that the newstate changes.

If the newstate is valid we will call setState and that way we keep our "previous valid state" value in sync.

const newstate = useDateRangePickerState({ /* ... */ });

const [validDate, setValidDate] = useState(initialValue);

useEffect(() =&gt; {
   if (isValid(newstate)) {
       setValidDate(newstate);
   }
}, [newstate]);

As a sidenote, I'm really confused by the code in your question. defaultNowTime is stored in state so isn't it a mutation of state to call defaultNowTime.set in the defaultValue?

huangapple
  • 本文由 发表于 2023年2月16日 03:41:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75464716.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定