React自定义Hook表单提交时setState未更新状态问题咨询

1. 为什么setSD调用后打印的还是旧值 #

React 的 useState 状态更新是异步批量处理的设计：

• 调用setSD时，React 只是把这次更新请求加入内部的更新队列，不会立即修改当前执行上下文里的sd变量
• 当前handleSubmit函数里的sd是本次组件渲染周期闭包内的常量，值在本次渲染完成后就已经固定，所以setSD之后立即打印拿到的还是旧值
• 新的sd值要等本次事件回调执行完毕，React 触发组件重渲染后，在下一次渲染的函数上下文里才能拿到。如果需要监听状态更新完成，可以用useEffect监听sd的变化：

// 可在useButton内添加这段代码验证
useEffect(() => {
  console.log('sd 已更新为：', sd)
}, [sd])

2. 页面未同步更新的排查说明 #

如果更新状态后页面没有展示最新值，可以逐一排查以下两点：

• 确认你在组件的 JSX 代码中确实引用了sd的相关属性，没有引用的话视图自然不会发生变化
• 不要直接修改sd原对象赋值，这种操作绕过了 React 的状态更新逻辑，即使临时生效也会导致后续状态不可控，所有状态修改必须通过setSD完成

你当前的表单提交事件绑定onSubmit={handleSubmit(values)}写法符合高阶函数的调用规则，没有语法问题。

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