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

Question

我在 MUI v5 的

defaultValue

组件中设置了

Autocomplete

属性，但值始终为

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

你可以使用：

defaultValue={cars[0]}

Answer 2

您得到了

undefined-undefined

，因为您已经描述了所选属性应如下所示：

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

因此，您应该向默认选项传递一个可以访问

code

和

label

值的对象。 改变

defaultValue={cars[0]}

会有帮助。

工作演示

Answer 3

当您使用带有自动完成功能的defaultValue时，您需要设置参数的名称

defaultValue={{ 标签：汽车？.标签，代码汽车？.code }}

Answer 4

问题在于 getOptionLabel 道具您没有检查天气 *

选项？.代码 && 选项？.标签

• 是否已定义，因为显示了未定义。所以将代码的第 23 行更改为

getOptionLabel={(option) =>option.code && option.label ?

${option.code} - ${option.label}

：''}