Material UI Switch组件在react-hook-form执行reset时未同步更新问题

问题根因 #

Switch组件无法同步重置的问题由三个常见错误导致：

1. 属性冲突：Switch组件同时使用了非受控属性defaultChecked和react-hook-form的register绑定，后者已经自动处理开关组件的checked状态和变更事件，手动指定defaultChecked会打断状态同步逻辑
2. 表单初始化未指定默认值：useForm初始化时未传入redux获取的formState作为defaultValues，导致表单内部的基准状态和redux数据不一致
3. 重置配置错误：reset方法的配置项中keepDirty: true会保留已修改过的脏字段值，Switch一旦被手动操作过就会被标记为脏字段，重置时不会更新为目标值

修复步骤 #

步骤1：移除Switch的冗余defaultChecked属性 #

删除手动绑定的defaultChecked，仅保留register绑定即可：

<FormControlLabel
  control={
    <Switch
      size="medium"
      name="familyFriendly"
      {...register('content.isFamilySafe')}
    />
  }
  label="Family Friendly"
/>

如果修改后仍然存在同步问题，推荐使用Controller适配第三方UI组件，兼容性更强：

import { Controller } from 'react-hook-form';

<FormControlLabel
  control={
    <Controller
      name="content.isFamilySafe"
      control={control}
      render={({ field }) => <Switch size="medium" {...field} />}
    />
  }
  label="Family Friendly"
/>

步骤2：给useForm传入初始默认值 #

初始化时将redux拿到的表单状态作为defaultValues传入，保证表单内部基准值和redux数据一致：

const formState = useSelector(selectDynamicForm);
const {
  register,
  control,
  handleSubmit,
  reset,
  formState: { errors },
} = useForm<IFormInput>({
  defaultValues: formState
});

步骤3：调整reset方法的配置 #

将keepDirty改为false，确保所有字段都会被重置为指定值：

<button
  type="button"
  onClick={() => {
    reset(formState, {
      keepErrors: true,
      keepDirty: false,
      keepIsSubmitted: false,
      keepTouched: false,
      keepIsValid: false,
      keepSubmitCount: false,
    });
  }}
>
  reset
</button>

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