反应挂钩更新多个状态变量

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钩子。

React应该正确地在同一刻度中进行多个set调用，并且不会导致多次rerender。