React-Hook-Forms配置MUI Autocomplete预设值时数据被清空，求助解决方案

问题核心原因 #

出现该问题主要有两个关键因素：

• MUI Autocomplete默认通过对象引用判断选项匹配性，若预设的salesPerson对象与options数组中的对象不是同一引用，组件会判定无匹配选项，进而清空对应表单值。
• 表单initialValues未正确配置，导致Controller无法读取到预设的初始值。

具体解决方案 #

1. 确保表单初始值配置正确 #

初始化React Hook Form时，必须在initialValues中明确设置agreementHeaderData.salesPerson的初始值：

const { control, handleSubmit } = useForm({
  initialValues: {
    agreementHeaderData: {
      salesPerson: {
        id: "2",
        name: "Jhon,Snow",
        label: "Jhon,Snow",
        value: "Jhon.Snow@reliance.com",
        filter_field: null,
      }
    }
  }
});

2. 给Autocomplete添加自定义匹配规则 #

添加isOptionEqualToValue属性，通过唯一标识（比如id）定义选项与值的匹配逻辑，替代默认的引用匹配：

<Controller
  name="agreementHeaderData.salesPerson"
  control={props.formControl}
  render={({ field }) => (
    <Autocomplete
      className="salesPerson"
      {...field}
      fullWidth
      disablePortal
      id="salesPerson"
      // 关键：通过id判断选项与值是否匹配
      isOptionEqualToValue={(option, value) => option.id === value.id}
      onChange={(event, item) => {
        field.onChange(item);
      }}
      options={salesPerson}
      renderInput={(params) => <TextField {...params} required label="Sales Person" variant="filled" size="small" />}
    />
  )}
/>

3. 验证options数组包含匹配选项 #

确保salesPerson数组中存在与初始值id为"2"的对象，示例如下：

const salesPerson = [
  { id: "1", name: "Arya Stark", label: "Arya Stark", value: "arya@reliance.com" },
  { id: "2", name: "Jhon,Snow", label: "Jhon,Snow", value: "Jhon.Snow@reliance.com" },
  // 其他选项...
];

4. 可选：显式指定Autocomplete的value #

若仍存在值清空问题，可显式设置value属性，避免空值覆盖：

<Autocomplete
  // 其他属性保持不变
  value={field.value || null}
/>

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