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

Question

我正在使用 react-select 制作可搜索的下拉菜单。在您实际 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});
    }
};

Answer 1

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

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

Answer 2

尝试添加

multi={true}

希望它能奏效。

Answer 3

检查这个

const changeSelect2 = (name,value)=>{
    setFormState((preValue)=>{
        return {
        ...preValue, // use spead sign for join 
        [name] : value // lec 43 // 
        }
    });
}

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

Answer 4

试试这个：

        this.state = {
            isMulti:true,
        };


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

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

React-select multi not working the way it's defined in the documentation

reactjs

react-select

material-ui