React-Select 在选择一个值时下拉选项变得不可用

Question

处理来自另一个组件的 prop 以匹配 react-select 选项

const labelOptionsProcessed = []
    labelOptions.map(item => {
        let tmpObj = {
            id: item.id,
            label: item.name,
            name: item.name
        }
        labelOptionsProcessed.push(tmpObj)
    })

tmpObj 是选项的结构

<Select
      options={labelOptionsProcessed}
       isMulti
 ></Select>

当 select 下拉值时，选项变为无可用数据

在 select 一个选项之前 :

选择一个选项后：

StackBlitz：https://stackblitz.com/edit/react-4ddnq7

Answer 1

您必须为选项设置 value 属性而不是 id

EX:

const labelOptionsProcessed = []
labelOptions.map(item => {
    let tmpObj = {
        value: item.id, // here
        label: item.name,
        name: item.name
    }
    labelOptionsProcessed.push(tmpObj)
});

我想这不是生成选项列表的正确方法，我会这样做

const labelOptionsProcessed = labelOptions.map(({ value, name: label, name }) => {
  return {
    value,
    label,
    name
  };
});

React-Select 在选择一个值时下拉选项变得不可用

React-Select on selecting a value the dropdown options become unavailable

reactjs

react-select