关于提交和使用状态问题的反应钩子形式答案

【问题标题】：React-hook-form on submit and useState issue关于提交和使用状态问题的反应钩子形式
【发布时间】：2020-06-08 19:12:38
【问题描述】：

我在使用 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 来包装我的表单，这样我就可以将表单拆分成更小的组件。可能是这导致了这种副作用，还是只是我遗漏了一些明显的东西？

【问题讨论】：

这是打字错误吗？ const useState[error, setError] = useState(true)
是的，这是一个打字错误。我不好，我会编辑。

标签： reactjs react-hooks react-hook-form

【解决方案1】：

是的，React 就是这么奇怪。 setError(false) 正在第一次运行并更改状态，但不保证是同步的。所以console.log() 之后它仍然具有旧状态。

React hooks useState not updating with onChange

【讨论】：

啊，谢谢！我确实通过放弃 useState 解决了我的问题，但仍然想知道为什么 useState 不起作用。这样就搞定了。

【解决方案2】：

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

const [error, setError] = useState(true)

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

【讨论】：