React Hook Form表单首次提交全局状态未更新问题咨询

React 的状态更新是异步批量执行的，调用dispatch后，当前函数作用域内的state仍然是本次渲染周期对应的旧值，要等到下一次组件重渲染时，才能拿到更新后的状态。
你观察到的「首次提交全局状态未更新」是假象：实际上dispatch在首次提交时就已经执行成功，只是你在onSubmit函数里打印的还是更新前的旧状态；第二次提交时打印的是第一次更新后的状态，所以看起来像是第二次才生效，和 React Hook Form 本身没有关联。

1. 若需要监听状态更新结果，使用useEffect监听对应状态字段即可，状态更新完成后会自动触发回调：

// 顶部引入useEffect
import { useEffect } from 'react'

// 组件内添加监听逻辑
useEffect(() => {
  console.log('UPDATED CLIENT STATE: ', state)
  // 状态更新后的后续业务逻辑也可以放在此处执行
}, [state])

2. 你代码中的表单必填提示逻辑存在错误，你注册的字段是username，错误判断需要对应修改：

// 原错误写法
{errors.exampleRequired && <span>This field is required</span>}

// 修正后写法
{errors.username && <span>This field is required</span>}

内容的提问来源于stack exchange，提问作者yoursweater