React Hook Form中useFieldArray与Controller混合使用的值残留问题解析

问题现象

在使用React Hook Form库时，开发者发现当结合使用useFieldArray和Controller组件时，会出现一个特殊的值残留问题。具体表现为：当删除数组字段中的某一项并显示空状态后，再重新添加新项时，表单输入框中会显示之前删除的旧值，而实际上表单数据中存储的是新添加的空字符串值。

技术背景

React Hook Form是一个流行的React表单库，它提供了useFieldArray钩子用于管理动态数组字段，以及Controller组件用于集成第三方输入组件。这两个API的结合使用在复杂表单场景中十分常见。

问题根源分析

经过深入分析，这个问题主要源于以下几个方面：

1. React的卸载机制：当删除数组项时，对应的组件会被卸载，但React Hook Form内部可能仍然保留着对该字段的引用

2. 默认值处理：在重新添加数组项时，如果没有正确设置默认值，表单可能会回退到之前缓存的值

3. 组件生命周期：Controller组件在重新挂载时，如果没有明确的初始值指示，可能会从表单的缓存中恢复旧值

解决方案

针对这个问题，开发者可以采取以下几种解决方案：

1. 显式设置默认值：在添加新数组项时，确保为每个字段提供明确的默认值，而不仅仅是空对象

2. 使用shouldUnregister属性：在Controller组件上设置shouldUnregister属性，确保在组件卸载时从表单中注销该字段

3. 重置表单状态：在添加/删除操作后，可以调用reset方法重置表单状态

4. 键值控制：为每个动态生成的输入组件设置唯一的key，强制React在值变化时重新创建组件实例

最佳实践建议

为了避免这类问题，在使用React Hook Form的动态数组功能时，建议：

1. 始终为动态添加的字段提供完整的默认值结构
2. 考虑在表单的父组件中使用useEffect监控字段数组的变化
3. 对于复杂的动态表单场景，可以结合使用useWatch来实时获取字段值
4. 在表单重置或初始化时，确保提供完整的初始数据结构

总结

React Hook Form虽然提供了强大的表单管理能力，但在处理动态数组字段时仍需要注意一些细节。理解表单状态的管理机制和React组件的生命周期，能够帮助开发者更好地处理这类值残留问题。通过正确的默认值设置和组件配置，可以确保表单行为符合预期。