Question

我正在使用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});
    }
};

Answer 1

尝试使用multi代替isMulti。这样可以解决问题。

          <BrowserRouter>
                <div>
                    <Switch>
                        <PrivateRoute exact path="/" component={Artist} />
                        <Route exact path="/Login" component={Login} />
                    </Switch>   
               </div>
          </BrowserRouter>

Answer 2

尝试添加

multi = {true}

希望它能工作。

Answer 3

检查

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" />

Answer 4

试试这个：

        this.state = {
            isMulti:true,
        };


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

React-Select Multi无法按文档中定义的方式工作

4 个答案: