提交和使用状态问题的 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)是首次运行并更改状态，但不能保证是同步的。所以控制台.log((紧接着它仍然具有旧状态。

反应钩子使用状态不更新与 onChange

Answer 2

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

const [error, setError] = useState(true)
useEffect(() => {
console.log(error)
}, [error]);