如何在 react js 中使用 filter().map 处理数组答案

【问题标题】：how to handle an array with filter().map in react js如何在 react js 中使用 filter().map 处理数组
【发布时间】：2020-07-06 22:44:14
【问题描述】：

我正在尝试为我的数据库创建一个搜索引擎。我从映射所有元素开始，然后对每个元素中的某些内容进行过滤，如下所示：

const filteredCars = (carsGet.filter(item => {
        const filter = (item.make.toLowerCase().includes(searchfield.toLowerCase()) ||
            item.make.toLowerCase().includes(searchfield.toLowerCase()) === '')
            && (item.year > min || min === '') 
            && (item.year < max || max === '')
            && (item.color === color || color === '');
        console.log(filter);
        return filter
        
        }))

只要它只是一个项目，过滤器就可以正常工作，但是一旦我将数组发送到 color 它就会返回 false，如果我将 initialState 设置为 color: [] 并将 color === '' 更改为 color == = [] 他们从一开始就返回 false。

我已经为颜色创建了一个处理程序：

handleChange (e) {
    var options = e.target.options;
    
    var value = [];
    for (var i = 0, l = options.length; i < l; i++) {
      if (options[i].selected) {
        value.push(options[i].value);
      }
    }
    console.log(value)
    this.setState({color: value});
  }

console.log 返回 ["guld", "red"] 但过滤器对所有元素返回 false，即使我只选择一种颜色

【问题讨论】：

标签： javascript reactjs filter

【解决方案1】：

您可以检查color 是数组还是字符串，并相应地返回一个布尔值。

const filteredCars = (carsGet.filter(item => {
    const checkColor = () => {
        if(Array.isArray(color)) {
            return (color.length === 0) || color.includes(item.color);
        } else {
            return (color === '') || (color === item.color);
        }
    }

    const filter = (item.make.toLowerCase().includes(searchfield.toLowerCase()) ||
        item.make.toLowerCase().includes(searchfield.toLowerCase()) === '')
        && (item.year > min || min === '')
        && (item.year < max || max === '')
        && checkColor();
    console.log(filter);
    return filter

}))

【讨论】：