React Hook Form中useFieldArray与useController配合使用的注意事项

问题背景

在使用React Hook Form进行表单开发时，开发者经常会遇到需要动态增减表单字段的场景。React Hook Form提供了useFieldArray这个强大的Hook来处理这类需求。然而，当useFieldArray与useController配合使用时，开发者可能会遇到一些意料之外的行为。

核心问题表现

当表单中存在以下组合时会出现问题：

1. 使用useFieldArray管理动态数组字段
2. 使用useController或Controller组件控制输入字段
3. 设置了shouldUnregister选项

具体表现为：

• 当动态数组字段被卸载后重新挂载时，之前添加的数组项会意外保留
• 删除某些数组项后卸载组件，重新加载时被删除的项会重新出现

问题根源分析

这个问题的根本原因在于React Hook Form的内部工作机制与shouldUnregister选项的交互方式：

1. shouldUnregister的作用：这个选项控制表单字段在卸载时是否从表单状态中移除。默认情况下，React Hook Form会保留卸载字段的值。

2. useFieldArray的特殊性：动态数组字段有其独特生命周期，频繁的挂载和卸载是其正常工作模式的一部分。

3. 冲突产生点：当全局设置shouldUnregister为true时，useFieldArray的正常工作流程会被干扰，导致状态恢复异常。

解决方案

根据React Hook Form核心维护者的建议，正确的处理方式应该是：

1. 避免全局shouldUnregister：不要在useForm级别设置shouldUnregister: true

2. 局部控制卸载行为：如果确实需要控制字段卸载行为，可以在特定字段级别设置

3. 手动管理状态：对于需要完全清除状态的情况，建议手动调用unregister方法

最佳实践建议

1. 默认保留字段状态：在大多数情况下，保持字段卸载后不自动注销是最安全的选择

2. 谨慎使用shouldUnregister：只在明确知道其影响的情况下使用这个选项

3. 考虑替代方案：如果需要清除默认值，可以考虑在提交时手动过滤数据，而不是依赖自动注销机制

技术实现细节

从React Hook Form的源码可以看出，useFieldArray内部已经处理了shouldUnregister的情况：

React.useEffect(() => {
  return () => {
    (control._options.shouldUnregister || shouldUnregister) &&
      control.unregister(name as FieldPath<TFieldValues>);
  };
}, [name, control, keyName, shouldUnregister]);

这表明useFieldArray本身已经考虑了局部和全局的shouldUnregister设置，但在实际使用中，全局设置仍然会干扰其正常工作。

总结

在React Hook Form中使用动态数组字段时，理解其内部状态管理机制至关重要。shouldUnregister选项虽然强大，但在与useFieldArray配合使用时需要格外小心。遵循框架设计者的建议，避免在全局启用shouldUnregister，可以避免许多潜在的问题，确保动态表单的稳定工作。