Material UI Autocomplete报错：TypeError读取null的persist属性

这个错误的核心是Material UI Autocomplete的回调参数和Formik的handleChange不兼容，Formik的handleChange期望接收标准React事件对象并调用event.persist()，但Autocomplete的onChange/onInputChange传递的参数结构不符合Formik预期，从而触发错误。

具体修复步骤： #

1. 替换Autocomplete的回调函数
   不要直接使用formik.handleChange，而是手动调用formik.setFieldValue适配Autocomplete的参数结构：

• onChange参数为(event, selectedOption)，用于更新选中的选项对应字段
• onInputChange参数为(event, inputText)，用于更新输入框的文本值

2. 修正value和inputValue的绑定逻辑
   Autocomplete的value对应选中的选项对象，inputValue对应输入框文本，需确保与Formik状态类型匹配。

修改后的Autocomplete代码： #

<Autocomplete
  id="asynchronous-brands"
  isOptionEqualToValue={(opt, value) => opt.id === value.id}
  // 从brands数组匹配Formik状态对应的选项
  value={brands.find(brand => brand.label === formik.values.brandDescription) || null}
  getOptionLabel={(option) => option.label}
  options={brands}
  // 手动更新输入框文本到Formik
  onInputChange={(event, newInputValue) => {
    formik.setFieldValue('brandDescription', newInputValue);
  }}
  // 手动同步选中选项的label和id到Formik
  onChange={(event, selectedOption) => {
    if (selectedOption) {
      formik.setFieldValue('brandDescription', selectedOption.label);
      formik.setFieldValue('id', selectedOption.id);
    } else {
      formik.setFieldValue('brandDescription', '');
      formik.setFieldValue('id', null);
    }
  }}
  inputValue={formik.values.brandDescription}
  renderInput={(params) => (
    <TextField
      sx={{/* styles */}}
      {...params}
      placeholder="Descripción de Marca"
    />
  )}
  size="small"
/>

同步调整setValues函数 #

编辑模式赋值时，需从brands数组匹配对应选项，保证Autocomplete状态正确：

const setValues = (values: BrandsFront | undefined) => {
  if (!values) return;
  const matchedBrand = brands.find(brand => brand.id === values.id) || null;
  const newValue = {
    id: values.id,
    brandDescription: matchedBrand ? matchedBrand.label : values.brandDescription,
    brandShortDescription: values.brandShortDescription,
    imagePath: '',
    statusDescription: values.statusDescription === "Activo" ? true : false,
  };
  formik.setValues(newValue); 
};

关键说明 #

• 禁止直接将formik.handleChange传递给Autocomplete回调：两者参数结构不匹配，Formik的handleChange是(fieldName)(event)格式，而Autocomplete回调是(event, value)格式。
• 确保isOptionEqualToValue函数正确比较选项与当前值，避免Autocomplete出现状态不匹配问题。

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