材质UI自动完成React。在列表中显示不同的选项，并在表单状态（具有多个值）中保存不同的选项

Question

我打算使用自动完成功能，以便它以表单状态存储对象的某个属性，并在自动完成选项列表中显示另一个属性。例如，如果选项列表如下：

[
    { gender_name_short: "F", gender_name_long: "Female" },
    { gender_name_short: "M", gender_name_long: "Male" },
    { gender_name_short: "O", gender_name_long: "Other" }
]

我打算以表单状态存储“ gender_name_short”，并在下拉列表中显示“ gender_name_long”。我能够做到这一点，这是我所做的实现的codesandbox链接（您还可以提出更好的方法吗？） https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js:231-412

现在我的问题是我还希望能够在一个数组中存储多个值，不适用于该示例，因为当一个人不能有多个性别时，但我想将其用于其他用例。那我该怎么做

当前行为?

如果我在自动完成组件中添加“多个”道具，则会收到错误消息 TypeError 无法读取未定义的属性“过滤器”

预期行为?

将多个值以其各自的short_name_format格式存储在数组中 例如）['M'，'F'，'O']

繁殖?的步骤

https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js:231-412 步骤：

1. 当前代码可以不使用多个代码来演示有效的示例
2. 在自动完成调用（prop）中取消对App.js中多个注释的注释
3. 将性别的初始化更改为空列表

Answer 1

此sandbox显示了您的问题的可能解决方案。

检出我在transformValue顶部添加的FormikAutocomplete.js实用程序：

const tranformValue = (value, fieldtosave) =>
  Array.isArray(value)
    ? value.map(v => v[fieldtosave] || v)
    : value[fieldtosave];

及其用法：

<Autocomplete
      onChange={(_, value) =>
        setFieldValue(name, value ? tranformValue(value, fieldtosave) : null)
      }
 ...
/>

基本上，您所缺少的是，当Autocomplete设置为multiple时，onChange value是一个数组。