React Hook Form中useFieldArray与disabled选项的交互问题解析

问题背景

在使用React Hook Form库时，开发者发现当结合useFieldArray和useForm的disabled选项时，表单数组操作会出现预期外的行为。具体表现为：当useForm的disabled选项显式设置为false时，删除数组项后再添加新项会导致新项被错误地填充默认值。

问题复现

1. 初始化一个包含两个默认项的字段数组
2. 将useForm的disabled选项设为false
3. 删除第二个数组项
4. 通过append方法添加新项
5. 新添加的项会自动填充为"2"的值（而预期应为空值）

技术分析

这个问题的根源在于React Hook Form内部对disabled状态的处理逻辑。当disabled选项被显式设置为false时，库会错误地保留已删除项的默认值引用，导致后续添加操作时错误地复用这些值。

解决方案

开发团队已在最新版本中修复了此问题。修复后的行为表现为：

1. 无论disabled选项设置为false还是undefined
2. 删除数组项后再添加新项
3. 新项都会保持为空值（符合预期）

最佳实践建议

1. 在使用useFieldArray时，如无特殊需求，建议不显式设置disabled选项（保持undefined状态）
2. 如需控制表单禁用状态，建议使用setDisabled方法动态调整
3. 始终确保使用最新版本的React Hook Form以获得最佳稳定性和功能支持

总结

表单库的disabled状态处理是一个容易被忽视但十分重要的细节。React Hook Form团队及时响应并修复了这个问题，展示了开源社区的高效协作。开发者在使用复杂表单功能时，应当注意各种选项间的交互影响，并及时更新依赖版本。