javascript - 加载选择控件时如何删除预选选项？

Question

加载时，我正在使用 react 选择和预选选项(来自状态)。使用多个选择 true。当我点击选择框时，它仍然显示已经出现的选项。如何从选项列表中删除那些？

这是我的代码:

  const options = []
    {
        deviceData ? deviceData.forEach((element, key) => {
            options.push({ value: element.id, label: element.area })
        }) : null;
    }

         <Select isMulti
                                        isSearchable
                                            value={defaultSelected}
                                            onChange={handleChange}
                                            options={options}
                                        />

            function handleChange(selectedOption) {
                setDefaultSelected(selectedOption)
            };

    async function getRooms(deviceIds) {
        ... // filterring logic to select multiple options load 
    ... filteredDevices.push({ value: index, label: devicesAll.area })
            setDefaultSelected(filteredDevices) // This loads pre-selected values to multi select box. 
    }

更新:我注意到预选仅在我提供值作为索引时有效(值={defaultSelected})。所以我在下面传递为“defaultSelected”值，其中 value: number

可能是因为这个，它在加载时没有过滤 select 的值？控制台日志(过滤设备)

{ id: "5d25f9d2dc4aea7838b0aa9f" label: "Meeting room 2" value: 0 }

如果您需要更多代码来理解这个问题，请告诉我。谢谢

Answer 1

如果我理解你的问题，你希望在第一次渲染时预先选择“默认值”(由 defaultSelected 提供)，并且你希望这些可以由用户更改在随后的互动中。

一种方法是通过 defaultValue应该做你想做的 Prop :

<Select isMulti isSearchable
        defaultValue={defaultSelected} // <-- use defaultValue instead
        onChange={handleChange}
        options={options} />

例如，做这样的事情:

const values = [
  { id: "5d25f9d2dc4aea7838b0aa9f", label: "Meeting room 2", value: 0 },
  { id: "5d25f9d2dc4aea7838b11111", label: "Meeting room 1", value: 1 }
];

<Select
    defaultValue={[values[0]]}
    isMulti
    name="colors"
    options={values} />

这是 a working example showing上面的 Action