MUI v5中Autocomplete设置defaultValue后值始终为undefined问题求助

你代码里一共存在3个核心错误，逐一修复即可解决问题：

• defaultValue类型与options项不匹配
  Autocomplete的defaultValue必须和options数组内元素的类型完全一致，你的options是{label: string, code: string}结构的对象数组，但给defaultValue传的是拼接后的字符串，组件无法匹配到对应选项，导致默认值不生效、状态异常。
  修复：将defaultValue属性改为 defaultValue={cars[0]}

• onChange回调内属性名拼写错误
  你在onChange里写的value.name不存在，你定义的cars数组的对象属性是label，访问不存在的属性自然会得到undefined。
  修复：将formik.setFieldValue的参数改为 formik.setFieldValue("car", ${value.code} - ${value.label})

• Formik配置冲突+字段不匹配

  1. Formik的initialValues里定义的字段是car，但你给TextField设置的name="cars"多了个s，导致Formik无法正确同步字段值
  2. 不要同时监听Autocomplete的onChange和TextField的onChange，Autocomplete已经封装了输入框状态逻辑，两个回调同时触发会导致状态覆盖，把TextField的onChange={formik.handleChange}删除即可，只保留Autocomplete的onChange同步Formik值
  3. 如果需要初始时Formik的car字段就有默认值，直接在initialValues里设置 car: ${cars[0].code} - ${cars[0].label}`` 和Autocomplete的默认值对应即可

修复后核心代码参考 #

const cars = [
  { label: "BMW", code: "Volkswagen" },
  { label: "Benz", code: "Mercedes" }
];

const formik = useFormik({
  initialValues: {
    // 可选：设置Formik初始默认值
    car: `${cars[0].code} - ${cars[0].label}`
  },
  onSubmit: (values) => {}
});

<Autocomplete
  id="autocomplete"
  options={cars}
  getOptionLabel={(option) => `${option.code} - ${option.label}`}
  renderOption={(props, option) => (
    <Box component="li" {...props}>
      {option.code} - {option.label}
    </Box>
  )}
  // 修复：defaultValue用对象类型和options匹配
  defaultValue={cars[0]}
  onChange={(e, value) => {
    // 修复：用label属性而非不存在的name属性
    formik.setFieldValue("car", `${value.code} - ${value.label}`);
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      id="textField"
      // 修复：字段名和Formik定义的car一致
      name="car"
      label="Cars"
      onBlur={formik.handleBlur}
      inputProps={{
        ...params.inputProps,
        autoComplete: "new-password"
      }}
    />
  )}
/>

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