reactjs - 如何显示 material-ui 自动完成字段的初始值？

Question

我使用 material-ui (v5) 和 formik 的自动完成字段来生成我的表单。在这个表单上，我有一些定义为常量的列表。

我使用 api 来获取此列表的默认值。此 api 仅返回选项的“代码”，但不返回其标签。

<Formik
        enableReinitialize
        initialValues={initialFormValues}
        validationSchema={Yup.object().shape({
[...]
<Autocomplete
  error={Boolean(touched.civility && errors.civility)}
  helperText={touched.civility && errors.civility}
  label="Civility"
  margin="normal"
  name="civility"
  onBlur={handleBlur}
  onChange={(e, value) => setFieldValue('civility', value)}
  options={civilities}
  value={values.civility}
  getOptionLabel={(option) =>
    option.name ? option.name : ''
  }
  isOptionEqualToValue={(option, value) => option.code === value}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="outlined"
      label={<Trans>Civility</Trans>}
    />
  )}
/>

我的参数 isOptionEqualToValue 很好，因为即使输入中没有显示该值，它在列表中也被很好地选择了。

您可以看到输入文本字段为空：

但是如果我展开列表，我可以看到我的“ms”值已被选中：

我应该怎么做才能使输入文本包含默认值？

Answer 1

克隆上面的代码片段后，问题出在getOptionLabel，option参数是字符串值，因此它没有name属性并且显示为空字符串。这是一个在线示例代码框。