如何在 react-select 中使用 isMulti 处理多个选项

Question

我正在尝试进行选择，在这里我可以选择不同的城市并过滤掉那些不在所选城市中的城市，我的过滤器似乎有效，但即使我设置了 isMulti，我也无法选择多个城市在 Select 我也试过 isMulti={true} 但它不起作用，我认为这是我的处理程序不起作用：

handleChange (selectedOptions) {
    selectedOptions.map(o => this.setState({by: o.value.value}))
      //var options = selectedOptions.value;
        /*var value = [];
        for (var i = 0, l = options.length; i < l; i++) {
          if (options[i].selected) {
            value.push(options[i].value);
          }
        }*/
        console.log(selectedOptions)
        
      }

注释掉的那个也不起作用，但它确实适用于 html 标签选择。

这是我的过滤器：

const filteredUsers = (usersGet.filter(item => {
        const checkHairColor = () => {
            if(Array.isArray(haircolor)) {
                return haircolor.length > 0 ? haircolor.includes(item.haircolor) : true;
            } else {
                return (haircolor === '') || (haircolor === item.haircolor);
            }
        }
        const checkCity = () => {
            if(Array.isArray(city)) {
                return city.length > 0 ? by.includes(item.city) : true;
            } else {
                return (city === '') || (city === item.city);
            }
        }
        const filter = (item.navn.toLowerCase().includes(searchfield.toLowerCase()) ||
            item.navn.toLowerCase().includes(searchfield.toLowerCase()) === '')
            && (item.age > minage || minage === '') 
            && (item.age < maxage || maxage === '')
            && checkHairColor()
            && checkCity();
        console.log(filter);
        return filter
        
        }))

但是我很确定我的过滤器可以工作，但不确定，因为我还没有得到要发送到过滤器的数组。

<Select 
    isMulti={true}
    hideSelectedOptions={false}
    closeMenuOnSelect={false}
    isSearchable={true}
    name="by"
    value={selectedOptions} 
    onChange={this.handleChange}
    options={byer}
   />

https://stackblitz.com/edit/react-fntxzp?file=index.js

Answer 1

select 的问题是，您没有正确更新状态。如果你在 react 中更新状态，你应该提供一个全新的对象。并仅更新您需要更改的部分。

https://stackblitz.com/edit/react-uygysb?file=index.js