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

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 link（你能提出更好的方法吗？） https://codesandbox.io/s/cool-bogdan-6lyxs?file=/src/App.js:231-412

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

当前行为

如果我将 'multiple' 道具添加到自动完成组件，我会收到错误消息 类型错误 无法读取未定义的 属性 'filter'

预期行为

将多个值存储在数组中各自的 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 显示了您的问题的可能解决方案。

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

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 是一个数组。