React-select multi 无法按照文档中定义的方式工作答案

【问题标题】：React-select multi not working the way it's defined in the documentationReact-select multi 无法按照文档中定义的方式工作
【发布时间】：2018-08-30 07:06:52
【问题描述】：

我正在使用 react-select 创建一个可搜索的下拉菜单。在您实际选择一个选项之前，它工作正常，然后它只会引发Each child in an array or iterator should have a unique "key" prop. 错误，不会删除您选择的选项，也不会显示您到目前为止选择的内容。我的选项是一个包含对象{value: crew.id, label: crew.code} 的数组，这是我的 Select 组件

<Select
    isMulti
    name='teamIdsFilter'
    menuPosition='fixed'
    options={crewOptions}
    value={teamIds}
    placeholder='Nepasirinktas'
    onChange={event => this.handleTeamIdsSelect(event)} />

还有我的 handleTeamIdsSelect 事件处理程序

handleTeamIdsSelect = (event) => {
    if (event) {
        const selectedCrew = event.map(crew => crew.value);
        this.setState({teamIds: selectedCrew});
    }
};

【问题讨论】：

可能你没有正确更新状态
选择它后会返回一个包含选定对象的数组，因此更新状态一切正常。 react-select 组件的工作方式与文档中描述的不同。
那么你必须仔细检查完整的文档，你可能错过了一些愚蠢的事情
Actual documentation 我很确定我没有错过任何东西，因为没有什么可错过的，该组件对我来说工作方式不一样。
@AmruthLS 你是对的，事件处理程序是问题所在，当我需要将整个事件（带有对象的数组）存储到状态时，我只存储了事件的值。但是他们应该在文档中提到它，因为我认为它会返回与常规 material-ui select 相同的事件。

标签： reactjs material-ui react-select

【解决方案1】：

尝试使用 multi 而不是 isMulti。这将解决问题。

<Select
    multi
    name='teamIdsFilter'
    menuPosition='fixed'
    options={crewOptions}
    value={teamIds}
    placeholder='Nepasirinktas'
    onChange={event => this.handleTeamIdsSelect(event)} />

【讨论】：

添加multi与添加bananas是一样的；一开始我以为你是对的，这让我的错误消失了；但是，这仅意味着您的 Select 组件现在是单项选择，而不是多项选择！（在 2020 年 10 月使用 v3.1.0 对此进行了检查）

【解决方案2】：

检查一下

const changeSelect2 = (name,value)=>{
    setFormState((preValue)=>{
        return {
        ...preValue, // use spead sign for join 
        [name] : value // lec 43 // https://stackoverflow.com/questions/32515598/square-brackets-javascript-object-key
        }
    });
}

<Select options={crewOptions}  onChange={(res)=>{changeSelect2('teamIdsFilter',res.value)}} name="teamIdsFilter" />

【讨论】：

【解决方案3】：

试试这个：

        this.state = {
            isMulti:true,
        };


<Select  isMulti={this.state.isMulti}/>

【讨论】：

【解决方案4】：

尝试添加

多={真}

希望它会起作用。

【讨论】：

这是对我有用的傻事。在 isMulti 之后确保再次按回车键。解决了问题