React Hook Form Field Array回填服务端动态复选框值

• 复选框绑定字段错误：当前复选框绑定的是group.${index}.name字段，该字段存储的是分组名称字符串，非空字符串在原生复选框逻辑中会被判定为真值，导致所有复选框默认全选，完全没有关联存储选中状态的value布尔字段
• 字段数组初始化逻辑有缺陷：循环调用append单条添加分组，会触发react-hook-form多次状态更新，导致字段初始值挂载不同步
• 复选框缺少显式的选中状态映射，没有和字段数组的布尔值属性做绑定，初始状态无法正确渲染

• 调整复选框绑定字段：将register绑定目标从分组名称字段改为存储选中状态的group.${index}.value布尔字段
• 优化分组数组初始化：使用useFieldArray提供的replace方法一次性替换全部分组字段，替代原来的先清空再循环单条追加的逻辑，避免状态不同步问题
• 给复选框补充默认选中配置，显式关联字段值和选中状态，同时保留动态渲染逻辑，兼容后续分组增删场景

1. 调整useFieldArray解构，引入replace方法

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

2. 替换分组初始化逻辑

useEffect(() => {
  if (subject) {
    setValue("username", subject.username);
    setValue("firstName", subject.first_name);
    setValue("lastName", subject.last_name);
    setValue("email", subject.email);
    setValue("isActive", subject.is_active);
    setValue("isStaff", subject.is_staff);
    setValue("isSuperuser", subject.is_superuser);

    // 格式化分组数据后一次性替换字段数组
    const groupList = subject.groups.map(group => ({
      groupId: group.id,
      name: group.name,
      value: group.value
    }));
    replace(groupList);
  }
}, [subject, replace, setValue]);

3. 修正分组复选框渲染逻辑

<div className="bottomHalf">
  <label>User's Groups</label>
  {fields.map((item, index) => (
    <div key={item.id}>
      <input
        className="checkbox"
        type="checkbox"
        {...register(`group.${index}.value`)}
        defaultChecked={item.value}
      />
      <label
        className="checkboxLabel"
        htmlFor={`group.${index}.value`}
      >
        {item.name}
      </label>
    </div>
  ))}
</div>

修正后，示例数据中Admin、Managers、Stakeholders三个分组复选框默认未选中，Users分组默认选中，后续接口返回的分组新增、删除都会自动适配渲染，无需额外修改前端逻辑。

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