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

问题描述

我使用 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”值已被选中：

如何使输入文本包含默认值？

解决方法

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