React-hook-form 提交和 useState 問題

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)第一次運行並更改 state，但不能保證是同步的。 因此，console.log() 之后仍然有舊的 state。

React hooks useState 不使用 onChange 更新

Answer 2

React state 更改是異步的。 不能保證您會在同步的console.log中獲得最新的更改。 如果您想查看最近的更改，記錄值的正確方法是在useEffect掛鈎中。

const [error, setError] = useState(true)

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