多重过滤反应答案

【问题标题】：Multiple filter react多重过滤反应
【发布时间】：2019-12-13 19:08:01
【问题描述】：

我有一个从 api 获取一些数据的反应应用程序。我现在需要过滤它。我已经完成了一个类别过滤器，但我现在需要通过价格范围进行过滤，以便这两个过滤器可以一起工作。我使用两个输入来输入过滤条件。

来自 api 的数据在 state 内部，看起来像这样

data = [
  { name: 'Audi',category: 'cars',  price: 132342 },
  { name: 'Macbook', category: 'laptops', price: 1322 },
  { name: 'Canon', category: 'cameras', price: 13342 },
  { name: 'Nikon', category: 'cameras', price: 12342 },
  { name: 'BMW', category: 'auto', price: 1655 }, etc];

我做的分类过滤器：

state = {
        data: [],
        category: 'all'
    }

const visible = this.filter(data, category);

filter(items, filter){
        switch(filter){
            case 'all':
                return items;
            case 'auto':
                return items.filter((e) => e.category === 'cars');
            case 'cameras':
                return items.filter((e) => e.category === 'cameras');
            case 'laptops':
                return items.filter((e) => e.category === 'laptops');
            default:
                return items;
        }
    }

<select 
    id = 'category'
    value = {filter}
    onChange = { changeFilter }>
    { option }
</select>
changeFilter = (event) => {
        this.setState({
            category: event.target.value
        })
    }

如何为此添加价格范围过滤器？

【问题讨论】：

你要多选还是多选？
多选我猜
Multiple filters in React的可能重复
您昨天刚刚针对不同的数据集提出了同样的问题？
我做了，但我没有得到任何答案

标签： javascript arrays reactjs filter

【解决方案1】：

我会用高阶函数（返回函数的函数）构造过滤器。

const chainFilters = filters => value => filters.every(f => f(value))

const itemFilters = (category, min, max) => chainFilters([
  v => !category || category === 'all' || v.category === category,
  v => min === undefined || v.price >= min,
  v => max === undefined || v.price <= max,
])

const items =  [
  { name: 'Audi',category: 'cars',  price: 132342 },
  { name: 'Macbook', category: 'laptops', price: 1322 },
  { name: 'Canon', category: 'cameras', price: 13342 },
  { name: 'Nikon', category: 'cameras', price: 12342 },
  { name: 'BMW', category: 'auto', price: 1655 }
]

console.log('cameras price < 13000:\n' ,items.filter(itemFilters('cameras', 0, 13000)))

console.log('cars:\n', items.filter(itemFilters('cars')))

console.log('all price < 2000:\n', items.filter(itemFilters('all', 0, 2000)))

【讨论】：