Javascript 物料界面自动完成反应。在列表中显示不同的选项，并在表单状态中保存不同的选项（具有多个值）

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

[
    { 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链接（你能推荐一个更好的方法吗？）

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

当前行为这显示了问题的可能解决方案

签出我在FormikAutocomplete.js顶部添加的

transformValue

util：

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)
      }
 ...
/>

setFieldValue（名称、值？TransformValue（值、fieldtosave）：空）
}
...
/>

---

基本上，您缺少的是当

Autocomplete

设置为

multiple

时，

onChange

值

是一个数组。

记录良好的问题-做得好！见下面我的答案。