React 钩子更新多个状态变量

Question

我刚刚在代码中找到了这个函数，不确定它是否真的可以工作，因为它尝试按顺序更新两个状态变量

changeIsOpen和changeInputValue是国家制定者，对我来说看起来不对劲

const toggleOpen = (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>
): void => {
event.preventDefault()
const newOpenState: boolean = !isOpen
changeIsOpen(newOpenState)
const curItem: SelectSuggestV2Item | undefined = items.find(
(item: SelectSuggestV2Item) => item.id === selectedId
)
// If closed and a search was in progress, restore the last selected value
if (!newOpenState && curItem != null && curItem.label !== inputValue) {
changeInputValue(curItem.label)
}
}

Answer 1

由于代码段在更改后不会读取isOpen状态值，而是依赖于其本地newOpenState值，因此它应该按预期工作。

如果您有更复杂的代码，其中要读取/写入多个状态值，则可能需要考虑改用React.useReducer钩子。

此外，同一刻度中的多个set调用，应该由 React 正确批处理，并且不会导致多次重新渲染。