React Hook Form中setValue设置数组未刷新子组件表单数据问题

核心原因 #

直接用setValue更新useFieldArray管理的数组字段时，会绕过useFieldArray内部的状态同步逻辑，导致子组件通过useFormContext获取的表单上下文未更新，进而出现getValues返回旧值的情况。而单个字段更新时，setValue会触发对应字段的状态更新，所以能正常生效。

解决方案 #

1. 使用useFieldArray提供的replace方法（推荐）

useFieldArray专门提供了replace方法用于批量替换整个数组，它会同步更新useFieldArray的内部状态，确保子组件能拿到最新的表单数据：

// 父组件Mitigation中
import { useForm, useFieldArray } from "react-hook-form";

const Mitigation = () => {
  const { control } = useForm({
    defaultValues: {
      partners: []
    }
  });
  // 解构出replace方法
  const { fields, replace } = useFieldArray({
    control,
    name: "partners"
  });

  // 批量更新partners数组的函数
  const updatePartners = () => {
    // 使用replace替换整个数组，并开启验证
    replace(mitigationDetails.partners, { shouldValidate: true });
  };

  return (
    <div>
      {/* 循环渲染子组件 */}
      {fields.map((item, index) => (
        <PartnerForm key={item.id} index={index} />
      ))}
    </div>
  );
};

2. 确保子组件的字段名称配置正确

子组件中使用Controller时，要保证name属性的路径与父组件的数组字段结构完全匹配：

// 子组件PartnerForm中
import { useFormContext, Controller } from "react-hook-form";
import AutoComplete from "你的AutoComplete组件路径";

const PartnerForm = ({ index }) => {
  const { control } = useFormContext();

  return (
    <Controller
      // 正确的字段路径：partners[index].name
      name={`partners.${index}.name`}
      control={control}
      render={({ field }) => (
        <AutoComplete
          value={field.value}
          onChange={(value) => field.onChange(value)}
          // 其他AutoComplete属性
        />
      )}
    />
  );
};

3. 验证数据源结构一致性

确认mitigationDetails.partners的结构与表单partners字段的默认结构完全一致，比如每个元素都包含name等必填字段，避免因结构不匹配导致更新失效。

额外说明 #

如果必须使用setValue，可以尝试添加shouldDirty: true和shouldTouch: true选项，但这种方式仍可能存在状态不同步的风险，因此优先推荐使用useFieldArray的replace方法。

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