React Hook Form 中 reset 与 getValues 的同步问题解析

问题背景

在使用 React Hook Form 进行表单开发时，开发者可能会遇到一个特殊场景：当从 formState 中解构出 isValid 属性后，调用 reset 方法并使用 keepDirtyValues 选项时，getValues() 返回的值与表单实际渲染的值不一致。

现象描述

具体表现为：

1. 表单中包含动态字段（如可增减的标签列表）
2. 用户修改了某些字段值
3. 调用 reset 方法并设置 keepDirtyValues: true
4. 此时 getValues() 返回的是默认值而非当前表单显示的值

技术原理分析

这个问题的根源在于 React Hook Form 内部的状态管理机制：

1. isValid 订阅的影响：当从 formState 中解构出 isValid 时，表单会进入"全量验证"模式，这会改变表单的内部状态管理方式

2. mount 状态的作用：在 reset 操作中，表单会检查 _state.mount 状态来决定如何组合返回值。当 isValid 被订阅且未显式设置 keepIsValid 选项时，mount 状态会被重置为 false

3. keepDirtyValues 的实现：该选项本意是保留用户已修改的值，但由于上述状态管理机制，导致 getValues() 返回了不正确的值

解决方案

针对这个问题，目前有以下几种解决方案：

1. 调整 reset 调用方式：

reset(undefined, { 
  keepDirty: true, 
  keepDirtyValues: true 
})

2. 避免在渲染时直接使用 getValues：

• 改用 watch 或 useWatch 来订阅值变化
• 在事件处理函数中获取最新值

3. 明确 reset 的三种使用场景：

// 场景1：完全重置为defaultValues
reset();

// 场景2：更新defaultValues和表单值
reset({ test: 'test' });

// 场景3：保留已修改值，重置其他状态
reset(undefined, { keepDirtyValues: true });

最佳实践建议

1. 如果不需要实时验证状态，尽量避免从 formState 中解构 isValid

2. 明确区分 reset 的不同使用场景，理解每个选项的具体含义

3. 对于动态表单，考虑使用 watch 而不是 getValues 来获取值

4. 在复杂表单场景下，充分测试 reset 的各种组合选项

总结

React Hook Form 的这个行为虽然看似是一个bug，但实际上反映了表单状态管理的复杂性。理解表单内部的状态流转机制，能够帮助开发者更好地处理这类边界情况。在大多数场景下，通过合理使用 reset 的选项组合，可以避免这类问题的发生。