React Hook Form中FieldArray设置defaultValues后输入框无数据显示

1. 移除shouldUnregister: true配置 #

你在register选项里设置的shouldUnregister: true会干扰字段与默认值的绑定逻辑——这个配置原本用于组件卸载时清除字段，但初始化阶段会导致输入框无法正确读取defaultValues中的数据。

修改每个输入框的register配置，删掉该选项：

<input
  placeholder="name"
  {...register(`contactsArray.${index}.fio` as const,
    {
      required: { value: someReturnedTrueOaFalse(), message: "someMessage" },
    })
  }
/>

2. 改用field.id构建字段路径 #

React Hook Form的FieldArray推荐用每个field自带的id（而非循环的index）来绑定字段。index会随数组项增删、排序变化，可能导致字段与数据的映射失效，初始化阶段也容易出现匹配问题。

调整路径写法：

<input
  placeholder="name"
  {...register(`contactsArray.${field.id}.fio` as const,
    {
      required: { value: someReturnedTrueOaFalse(), message: "someMessage" },
    })
  }
/>

注：这里的field.id是FieldArray自动生成的唯一标识，对应表单内部的字段路径，无需与你业务数据的id关联。

3. 异步数据用reset方法设置 #

如果你的默认值是从服务器异步获取的（比如在useEffect里请求数据），直接修改useForm的defaultValues不会生效——因为defaultValues仅在组件初始化时读取。此时必须调用reset方法更新表单值：

useEffect(() => {
  const fetchContacts = async () => {
    const res = await fetch('/api/get-contacts');
    const serverData = await res.json();
    methods.reset({ contactsArray: serverData });
  };
  fetchContacts();
}, [methods]);

4. 校验类型与数据结构匹配 #

确认UserSubmitFormCreate类型中contactsArray的字段结构，和服务器返回的数据完全一致：字段名（如fio、phone_num、email）的拼写、大小写必须严格对应，否则会出现数据存在但无法映射的情况。

验证步骤 #

1. 先移除shouldUnregister: true，测试输入框是否显示默认值；
2. 若无效，改用field.id构建字段路径；
3. 确认异步数据是通过reset设置，而非直接修改defaultValues；
4. 打印服务器返回数据，对比类型定义的字段名是否完全匹配。

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