如何在加载 select 控件时删除预先 selected 的选项？

Question

加载时我正在使用 react-select 和 pre-selecting 选项（来自状态）。使用多个 select 是的。当我点击 Select 框时，它仍然显示已经出现的选项。如何从选项列表中删除那些？

这是我的代码：

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

更新：我注意到 pre-selection 仅在我提供值作为索引时有效（value={defaultSelected}）。所以我在下面作为 "defaultSelected" 值传递，其中 value: number

可能是因为这个，加载的时候没有过滤掉select的值？ console.log（过滤设备）

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

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

Answer 1

如果我理解你的问题，你希望在第一次渲染时预先选择 "default values"（由 defaultSelected 提供），并且你希望这些可以由用户更改在随后的互动中。

一种方法是通过 defaultValue 道具，它应该做你想做的事：

<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上面的操作

如何在加载 select 控件时删除预先 selected 的选项？

How to remove pre-selected options when loading select control?

javascript

reactjs

react-select

react-hooks