React Hook Form结合MUI受控复选框首次操作isDirty不更新

问题根源 #

结合formContext和fieldArray使用时，首次修改复选框未触发isDirty更新，核心原因是字段路径配置不规范、初始值缺少对应属性，导致React Hook Form无法正确追踪字段值的变化。

解决方案 #

1. 规范初始值结构
   确保fieldArray的初始数据包含checked布尔字段，让表单能正确识别初始状态：

   const defaultValues = {
     checkboxes: [
       { id: "1", label: "Checkbox 1", checked: false },
       { id: "2", label: "Checkbox 2", checked: false },
       { id: "3", label: "Checkbox 3", checked: false }
     ]
   };
   

2. 正确配置Controller的字段路径
   给Controller指定准确的字段路径，对应fieldArray项中的checked属性：

   <Controller
     name={`${name}.checked`}
     control={control}
     render={({ field }) => (
       <Checkbox
         checked={field.value}
         onChange={(e) => field.onChange(e.target.checked)}
         label={label}
       />
     )}
   />
   

3. 确保FieldArray和FormProvider配置正确
   确认useFieldArray绑定正确的control和字段名，FormProvider正确传递表单上下文：

   // 表单根组件中
   const methods = useForm({ defaultValues });
   const { control } = methods;
   
   const { fields } = useFieldArray({
     control,
     name: "checkboxes"
   });
   
   return (
     <FormProvider {...methods}>
       {/* 渲染复选框组 */}
       {fields.map((item, index) => (
         <CheckboxGroup
           key={item.id}
           name={`checkboxes[${index}]`}
           label={item.label}
         />
       ))}
     </FormProvider>
   );
   

兜底方案（可选） #

如果上述配置后仍有问题，可在复选框onChange中手动触发脏状态更新：

<Controller
  name={`${name}.checked`}
  control={control}
  render={({ field, formState }) => (
    <Checkbox
      checked={field.value}
      onChange={(e) => {
        field.onChange(e.target.checked);
        !formState.isDirty && formState.setDirty(true);
      }}
      label={label}
    />
  )}
/>

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