RHF调用reset()方法时MUI复选框组无法重置值如何解决

reset()方法仅会修改react-hook-form内部维护的表单状态，你三种实现的通用问题是MUI复选框的选中状态没有和react-hook-form的表单值做双向绑定，重置后的状态无法同步到组件视图。

第一种实现 #

问题：Controller的render回调中未使用field返回的value绑定复选框选中状态，组件视图无法响应表单值的更新。
修复后代码：

<FormControl error={error} required={required} component="fieldset">
  <FormLabel component="legend">{label}</FormLabel>
  <Controller
    name={name}
    control={control}
    render={({ field: { onBlur: rhfonBlur, onChange: rhfonChange, value = [] } }) => (
      <FormGroup onBlur={rhfonBlur}>
        {Object.keys(options).map((key) => {
          return (
            <FormControlLabel
              label={key}
              key={key}
              control={
                <Checkbox 
                  checked={value.includes(key)}
                  onChange={(e) => rhfonChange(handleCheck(key))} 
                />
              }
            />
          );
        })}
      </FormGroup>
    )}
  />
  <FormHelperText>{helperText}</FormHelperText>
</FormControl>

第二种实现 #

问题：多个复选框共用同一个register(name)返回的属性，register默认适配单个表单控件，无法自动识别多选逻辑，重置时无法同步所有复选框的状态。
修复方案：直接替换为第一种的修复后实现即可，Controller对复杂表单控件的适配性远高于直接用register。

第三种实现 #

问题：复选框的checked属性绑定的是自定义局部状态state[key]，不是Controller传入的表单值，reset()不会主动更新自定义局部状态，导致视图无变化。
修复方案：删除自定义局部状态，直接用Controller传入的value绑定选中状态，代码逻辑和第一种修复方案对齐即可。如果必须保留自定义局部状态，可调用reset时同步更新自定义状态，或监听react-hook-form的formState.isReset变化触发状态同步。

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