MUI v5 中未定义自动完成的默认值

Question

我在 MUI v5 的Autocomplete组件中设置了defaultValue ，但该值始终为undefined 。

摘自我的代码

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

...

 const formik = useFormik({
    initialValues: {
      car: ""
    },
    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={`${cars[0].code} - ${cars[0].label}`}
        onChange={(e, value) => {
          formik.setFieldValue("car", `${value.code} - ${value.name}`);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            id="textField"
            name="cars"
            label="Cars"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            inputProps={{
              ...params.inputProps,
              autoComplete: "new-password"
            }}
          />
        )}
      />

我使用CodeSandbox创建了一个工作示例。 有人可以帮忙吗？

Answer 1

您得到undefined-undefined是因为您已经在此处描述了 selected 属性的外观：

getOptionLabel={(option) => `${option.code} - ${option.label}`}

因此，您应该将一个可以访问code和label值的对象传递给默认选项。 更改defaultValue={cars[0]}会有所帮助。

工作演示

Answer 2

你可以使用：

defaultValue={cars[0]}