英文:
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<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,
});
//once a valid 'newstate' 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 'newstate' 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(() => {
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
?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论