关于提交和使用状态问题的 React-hook-form

Question

嘿，我在使用 react-hook-form 时遇到了这个奇怪的问题。

这是我的代码的要点

const [error, setError] = useState(true)

const onSubmit = values => {
    setError(false)
    console.log(error) // true on first click and false on second click
}
<input type="submit" />

如您所见，第一次单击输入时错误为真，第二次单击时为错误。

我预计第一次点击输入时错误是假的，有人知道为什么是真的吗？

注意：我的表单是一个嵌套表单，我在其中使用 FormContext 来包装我的表单，这样我就可以将表单拆分成更小的组件。可能是这导致了这种副作用，还是我遗漏了一些明显的东西？

Answer 1

是的，React 很奇怪。 setError(false) 是运行第一次和改变状态，但不保证是同步的。所以紧随其后的 console.log() 仍然具有旧状态。

React hooks useState not updating with onChange

Answer 2

React 状态更改是异步的。不保证您将获得同步 console.log 中的最新更改。如果您想查看最近的更改，则记录值的正确方法是在 useEffect 挂钩内。

const [error, setError] = useState(true)

useEffect(() => {
  console.log(error)
}, [error]);

关于提交和使用状态问题的 React-hook-form

React-hook-form on submit and useState issue

reactjs

react-hooks

react-hook-form