MUI Autocomplete值无效报错：编辑加载数据与新建用户异常

问题核心 #

你遇到的报错源于创建新用户时表单country字段初始值为undefined，直接将defaultValue={value}传给Autocomplete，同时isOptionEqualToValue在value为undefined时尝试访问value.value，导致MUI无法识别有效选项，触发校验错误。结合react-hook-form使用时，需用Controller同步表单状态与Autocomplete组件，而非直接依赖defaultValue。

具体解决方案 #

1. 用react-hook-form的Controller包裹Autocomplete

Controller能统一管理表单字段状态，避免手动同步问题，替换原直接绑定方式：

<Controller
  name="country"
  control={control}
  render={({ field: { onChange, value } }) => (
    <Autocomplete
      options={countries}
      getOptionLabel={(option) => option.label}
      isOptionEqualToValue={(option, value) => {
        // 兼容空值场景，创建新用户时value为undefined
        if (!value) return true;
        return option.value === value.value;
      }}
      onChange={(_, data) => onChange(data)}
      renderInput={(params) => (
        <TextField {...params} label="Country" variant="outlined" />
      )}
      value={value}
    />
  )}
/>

2. 初始化表单时处理编辑场景的字段值

编辑用户时，确保country字段的值是匹配options结构的对象，而非纯字符串。调用reset初始化表单时，将后端返回的country字符串转换为对应选项对象：

const handleEdit = () => {
  const userToEdit = users[0];
  // 匹配对应的国家选项对象
  const matchedCountry = countries.find(
    (country) => country.value === userToEdit.country
  );
  reset({
    ...userToEdit,
    country: matchedCountry || null, // 无匹配项时设为null
  });
};

3. 调整Yup校验规则

让country字段校验兼容空值（创建新用户时允许未选择，或按需设置必填）：

const schema = yup.object().shape({
  name: yup.string().required(),
  email: yup.string().email().required(),
  country: yup.object().nullable(), // 允许空值，必填则添加.required()
});

原方法出错原因 #

• 创建新用户时，表单country初始值为undefined，defaultValue={value}将undefined传给Autocomplete，而MUI要求Autocomplete的value必须是options数组中的有效对象，或配置nullable后的null/undefined。
• isOptionEqualToValue函数在value为undefined时，访问value.value触发隐式错误，导致MUI判定值无效。

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