React Hook Form 中提交后状态更新异常问题解析

问题现象

在使用 React Hook Form 7.25.x 版本时，开发者遇到了一个奇怪的状态更新问题。当表单提交后，虽然提交处理函数被正确调用且能获取到最新表单数据，但通过 setState 更新的组件状态却未能正确反映最新值，导致界面渲染出现"陈旧数据"。

问题复现

1. 用户在表单输入框中输入文本并提交
2. 提交的数据被保存到组件状态并显示在界面上
3. 用户修改输入内容后再次提交
4. 控制台日志显示获取到了新数据，但组件状态仍保持第一次提交的值

技术分析

根本原因

经过深入排查，发现问题出在 React Hook Form 的 handleSubmit 回调函数中。回调函数接收的 data 参数实际上是同一个对象的多次引用，而非每次提交时创建的新对象。这导致 React 在比较新旧状态时认为对象未发生变化，从而跳过了重新渲染。

React 的渲染机制

React 使用浅比较来判断状态是否变化。当新旧状态是同一个对象引用时，即使对象内容已改变，React 也会认为状态未变。这种设计是为了性能优化，但在某些情况下会导致意外行为。

解决方案

1. 创建新对象：在 setState 时创建全新的对象副本

   setSubmittedData({ ...data });
   

2. 使用解构：如问题描述中提到的，解构 formState 可能会改变 React Hook Form 内部的行为，间接解决了问题

3. 避免直接依赖回调参数：可以考虑从表单中重新获取当前值，而非直接使用回调参数

最佳实践建议

1. 处理可变对象：当处理可能被外部库修改的对象时，总是应该创建新副本
2. 状态更新明确性：确保状态更新操作是明确的，避免依赖隐式行为
3. 调试技巧：在遇到类似问题时，可以使用 Object.is() 比较新旧值引用

总结

这个问题展示了 JavaScript 中对象可变性和 React 渲染机制之间的微妙交互。作为开发者，我们需要时刻注意数据的不变性原则，特别是在状态管理和表单处理这类场景中。React Hook Form 作为优秀的表单库，其性能优化可能导致这种边界情况，理解其内部机制有助于我们更好地使用它。

在未来的开发中，建议在处理表单提交时，总是显式地创建新对象来更新状态，这样可以避免因引用相同而导致的各种潜在问题。