如何在提交时使用React Hook Form重置MUI Autocomplete表单？

你遇到的问题根源是Controller未将表单状态的value绑定到Autocomplete组件，导致调用reset()时表单状态更新，但组件显示未同步。以下是具体修复方案：

1. 为Autocomplete绑定受控value #

在Controller的render函数中，解构出field对象的value并传递给CustomAutocomplete：

<Controller
  render={({ field: { onChange, value } }) => {
    return (
      <CustomAutocomplete
        multiple
        getOptionLabel={(option: Option) => option.name}
        options={DATA}
        label="name"
        value={value} // 关键：将表单值与组件绑定
        onChange={(e, options: Option[]) => onChange(options)}
      />
    );
  }}
  name="dataset"
  control={control}
  rules={{
    required: "Field is required"
  }}
/>

2. 确保CustomAutocomplete是受控组件 #

检查CustomAutocomplete的实现，必须将传入的value传递给底层MUI Autocomplete组件：

const CustomAutocomplete = ({ value, onChange, ...props }) => {
  return (
    <Autocomplete
      {...props}
      value={value}
      onChange={onChange}
      // 其他自定义逻辑
    />
  );
};

3. 可选：重置时明确指定默认值 #

如果仍有同步问题，可在onSubmit中明确传入重置值：

const onSubmit = (data: any) => {
  console.log("data:", data);
  reset({ dataset: [] }); // 强制重置dataset为空数组
};

修改完成后，调用reset()时，React Hook Form会同步更新表单状态与Autocomplete组件的选中状态。

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