React Hook Form useFieldArray首次渲染字段未更新问题排查

问题原因 #

1. 时序冲突：父组件首次渲染时，items初始为空数组，子组件的useFieldArray基于空的control状态初始化fields；随后父组件的useEffect触发更新items，子组件的useEffect调用replace(items)，但此时useFieldArray内部的状态同步机制尚未完成初始化，导致fields未及时更新，首次渲染仍显示空内容。
2. 表单字段未初始化：如果父组件useForm的defaultValues中未包含items字段，useFieldArray绑定的"items"字段在表单内部无初始状态，replace操作的更新无法正确触发表单状态同步。

解决方案 #

方案1：初始化表单默认值 #

在父组件的useForm配置中，将items的初始值加入defaultValues，确保useFieldArray初始化时就能拿到正确的字段状态：

// 父组件代码修改
const defaultValues = {
  // 保留原有表单字段
  items: [] // 与useState的初始值保持一致
};

const { handleSubmit, control } = useForm({
  defaultValues
});

方案2：优化子组件replace执行时机 #

子组件中给useEffect添加control依赖，确保control就绪后再执行replace，同时增加空值判断避免无效调用：

// 子组件代码修改
const MyComponent = ({ control, items }) => {
  const { fields, replace } = useFieldArray({
    control,
    name: "items",
  });

  useEffect(() => {
    if (items.length > 0 && control) {
      replace(items);
    }
  }, [items, control]);

  return (
    <>
      {fields.map((item, index) => (
        <p key={item.id}>{item.name}</p>
      ))}
    </>
  )
}

方案3：父组件直接同步表单字段 #

无需子组件调用replace，在父组件的useEffect中直接使用setValue更新表单的items字段，确保表单状态与useState的items同步：

// 父组件代码修改
useEffect(() => {
  // 模拟获取到的非空items数据
  const fetchedItems = [{id: '1', name: '测试项1'}, {id: '2', name: '测试项2'}];
  setItems(fetchedItems);
  setValue('items', fetchedItems); // 直接更新表单字段
}, []);

此时子组件的useFieldArray会自动同步表单中的items状态，无需额外处理。

内容的提问来源于stack exchange，提问作者ubi