React Hook Form 中数组字段的 keepDirtyValues 问题解析

在 React Hook Form 表单库的使用过程中，开发者可能会遇到一个关于数组类型字段的特殊问题：当使用 reset 方法并设置 keepDirtyValues 选项时，数组类型的脏字段值会被意外重置，而不是保留修改后的值。这个问题从 7.0.0 版本开始就存在，影响了需要动态处理数组字段的表单场景。

问题现象

当表单中包含数组类型的字段时，如果用户对该字段进行了修改（使其变为"脏"状态），然后调用 reset 方法并设置 keepDirtyValues 为 true，期望的行为是保留用户修改后的数组值。然而实际行为却是数组字段被重置为默认值（通常是空数组），这与预期不符。

技术背景

React Hook Form 是一个流行的 React 表单库，它提供了强大的表单状态管理能力。其中 reset 方法用于重置表单状态，而 keepDirtyValues 选项则允许在重置时保留用户已修改但未提交的字段值。

对于普通字段类型（如字符串、数字等），keepDirtyValues 能够正常工作。但对于数组类型的字段，由于内部实现上的差异，这个功能出现了异常行为。

影响范围

这个问题主要影响以下使用场景：

1. 动态表单构建器：当表单字段名称在运行时才确定时，无法使用 useFieldArray 这样的专用钩子
2. 复杂表单交互：需要在数据加载后保留用户已做的部分修改
3. 异步数据加载：从服务器获取数据后需要合并用户本地的修改

解决方案

虽然官方在后续版本中可能会修复这个问题，但目前可以采用的临时解决方案包括：

1. 手动合并数组值：在调用 reset 前，手动比较并合并默认值和当前值
2. 使用状态管理：将数组字段的状态提升到组件状态中管理
3. 自定义重置逻辑：根据 dirtyFields 信息实现自定义的字段保留逻辑

最佳实践

对于需要处理动态数组字段的表单，建议：

1. 尽可能使用 useFieldArray 处理已知字段名的数组
2. 对于完全动态的场景，考虑封装自定义钩子来处理数组字段
3. 在重置操作前，仔细验证数组字段的保留行为是否符合预期

这个问题提醒我们，在使用表单库的高级功能时，需要对特殊数据类型（如数组、对象）进行额外的验证和测试，以确保功能符合预期。