Refine项目中useFieldArray动态表单字段消失问题解析

问题现象

在使用Refine框架结合react-hook-form开发动态表单时，开发者可能会遇到一个典型问题：当用户通过useFieldArray创建的动态字段在页面路由跳转后会神秘消失。具体表现为：

1. 首次进入编辑页面时，动态字段正常显示
2. 返回列表页后再次进入同一编辑页面
3. 动态字段不再渲染，表单中对应的部分变为空白

技术背景

这个问题源于react-hook-form的内部工作机制。Refine的useForm封装了react-hook-form的useForm，在设置表单初始值时使用了setValue方法。这种方法虽然能设置字段值，但不会触发组件的重新渲染。

在动态表单场景下，useFieldArray管理的数组字段需要依赖组件渲染来保持同步。当路由变化时，如果表单状态没有正确更新，就会导致字段显示异常。

解决方案

经过技术团队分析，提出了以下两种解决方案：

方案一：使用useWatch监听字段变化

const { fields } = useFieldArray({
  control,
  name: "skills"
});

// 添加监听
const watchedSkills = useWatch({
  control,
  name: "skills",
  defaultValue: fields
});

这种方法通过react-hook-form提供的useWatch API主动监听字段变化，确保组件能够响应状态更新。

方案二：设置表单模式为onChange

const { ... } = useForm({
  mode: "onChange",
  // 其他配置
});

将表单验证模式设置为onChange可以强制表单在值变化时进行验证和更新，间接解决了渲染同步问题。

实现原理

这两种方案都解决了核心问题：确保表单状态与UI渲染保持同步。

1. useWatch方案：通过创建对特定字段的订阅，当这些字段的值发生变化时，会触发组件的重新渲染，从而保证UI与数据一致。

2. onChange模式方案：改变了表单的默认行为，使其在每次值变化时都执行完整的更新流程，包括可能触发的重新渲染。

最佳实践建议

对于Refine项目中的动态表单开发，建议：

1. 对于简单场景，优先使用onChange模式，配置简单且效果稳定
2. 对于复杂表单，特别是性能敏感的场景，推荐使用useWatch精确控制需要监听的字段
3. 始终在开发阶段进行路由跳转测试，确保表单状态持久化正常
4. 考虑封装自定义hook来统一处理这类问题，提高代码复用率

总结

动态表单的状态管理是前端开发中的常见挑战。通过理解react-hook-form的内部机制和Refine的封装逻辑，开发者可以更好地处理这类同步问题。本文介绍的两种方案都经过了实践验证，开发者可以根据项目需求选择最适合的解决方案。