React Hook Form中useFieldArray与外部数据源配合使用的注意事项

在使用React Hook Form进行表单开发时，useFieldArray是一个非常实用的API，它可以帮助我们高效地管理动态表单字段数组。然而，当与外部数据源配合使用时，如果不注意一些关键细节，可能会导致字段值显示异常的问题。

问题现象

开发者在使用useFieldArray管理模块列表时，遇到了一个典型问题：当从外部数据源（如TanStack Query或useState）获取数据并设置为表单初始值后，删除数组中的某一项会导致剩余字段显示不正确的值。

具体表现为：

1. 初始化表单并添加两个项目
2. 删除第一个项目后
3. 剩余输入框中显示的值与预期不符

根本原因分析

这个问题的核心在于React的key属性使用不当。useFieldArray内部会为每个字段生成一个唯一的id作为标识符，这个id应该被用作列表渲染时的key属性。

当开发者错误地使用了自定义ID（如moduleId）作为key时，React无法正确识别列表项的变化，导致在删除操作后，虚拟DOM的协调过程出现混乱，最终表现为字段值显示异常。

解决方案

正确的做法是始终使用useFieldArray自动生成的id作为列表项的key属性。这个id可以通过field对象访问，在示例中被重命名为item.id。

修改前的代码：

return <Item key={item.moduleId} index={index} item={item} />;

修改后的正确写法：

return <Item key={item.id} index={index} item={item} />;

最佳实践建议

1. 始终使用自动生成的id作为key：useFieldArray提供的id是经过特殊处理的，能够保证在数组操作时的稳定性。

2. 避免混合使用不同标识符：不要将业务ID（如moduleId）与表单内部ID混用，这会导致不可预测的行为。

3. 注意数据一致性：当使用外部数据源时，确保表单的values与fieldArray的items保持同步更新。

4. 调试技巧：遇到类似问题时，可以打印出fieldArray的内容，检查id与对应字段值的关系。

总结

React Hook Form的useFieldArray是一个强大的工具，但在与外部数据源配合使用时需要特别注意key属性的正确使用。遵循框架的设计原则，使用自动生成的id作为key，可以避免大多数渲染问题，确保表单操作的正确性和稳定性。

对于初学者来说，理解React的reconciliation机制和key属性的作用，对于解决这类问题会有很大帮助。记住，在动态列表渲染中，key是React识别元素身份的关键，错误的使用会导致各种意想不到的渲染问题。