Reactjs 在React Redux上组合多个过滤器

这是我的redux状态：

people: [
  {
            id: 1,
            name: 'John',
            weight: 4500000,
            category: 'employee',
            brand: 'sony',
            sport: 'baseball',
            country: 'NZ'
        },
        {
            id: 24,
            name: 'Frank',
            weight: 7210000,
            category: 'admin',
            brand: 'sony',
            sport: 'basketball',
            country: 'Australia'
        },
        {
            id: 10,
            name : 'George',
            weight: 5800000,
            category: 'admin',
            brand: 'samsung',
            sport: 'basketball',
            country: 'NZ'
        }
]

我希望通过多个参数进行过滤，并将这些过滤器组合起来，因此每次添加条件时，结果都会缩小或扩大

例如，如果我想要从新西兰打篮球的人，那么我将获得id为10的完整对象

然后，如果我删除国家/地区过滤器，我将获得id 10和24

怎么做

你知道怎么做吗

---

提前感谢

在同一个减速机中，您需要存储一个过滤器列表，其中包括要过滤的键和要过滤的值。e、 g

[{ key: 'sport', value: 'basketball'}, { key: 'country', value: 'NZ'}]

然后您只需在人员列表上应用过滤器：

people.filter(person => filters.every(filter => person[filter.key] === filter.value))

---

这只是检查每个人是否匹配同一个减速器中的所有筛选器。您需要存储筛选器列表，其中包括要筛选的键和要筛选的值。e、 g

[{ key: 'sport', value: 'basketball'}, { key: 'country', value: 'NZ'}]

然后您只需在人员列表上应用过滤器：

people.filter(person => filters.every(filter => person[filter.key] === filter.value))

---

这只是检查每个人是否匹配所有过滤器

我认为使用

lodash

过滤器可以满足您的需要，并且编写的代码最少：

对于打篮球的人，国家是新西兰。代码应该如下所示：

_.filter(people, { sport:"basketball", country: "NZ" })

在这种情况下，你需要在许多减缩器中进行过滤，并且不想重复写这些行。您可以编写一个通用函数或适配器函数，如：

const filterByCreteria = (people, creteria) => _.filter(people, criteria);

您应该创建一个列表criteria对象并将其导出，只要您需要，就可以将这些criteria导入到您的组件中

Creteria.js

export const BASKET_BALL = { sport: 'basketball' };
export const NEWZELAND = { country: 'NZ' };
// Go on for other criteria
...
...

i为您的组件命名，您应该导入条件并传递给ultility函数：

import { BASKET_BALL, NEWZELAND} from '/path/to/Criteria.js';
// ...
const creteria = {...BASKET_BALL, ...NEWZELAND}
Utils.filterByCreteria(people, criteria);
// ...

---

我认为使用

lodash

filter可以满足您的需要，并且可以编写最少的代码：

对于打篮球的人，国家是新西兰。代码应该如下所示：

_.filter(people, { sport:"basketball", country: "NZ" })

在这种情况下，你需要在许多减缩器中进行过滤，并且不想重复写这些行。您可以编写一个通用函数或适配器函数，如：

const filterByCreteria = (people, creteria) => _.filter(people, criteria);

您应该创建一个列表criteria对象并将其导出，只要您需要，就可以将这些criteria导入到您的组件中

Creteria.js

export const BASKET_BALL = { sport: 'basketball' };
export const NEWZELAND = { country: 'NZ' };
// Go on for other criteria
...
...

i为您的组件命名，您应该导入条件并传递给ultility函数：

import { BASKET_BALL, NEWZELAND} from '/path/to/Criteria.js';
// ...
const creteria = {...BASKET_BALL, ...NEWZELAND}
Utils.filterByCreteria(people, criteria);
// ...

---

这行吗？people.filter（p=>p.country=='NZ'&&p.id===10）不，因为它必须是动态的，我必须能够在我的组件中切换这些过滤器。实际上，我有很多过滤器，不止两个。它们被分成不同的组件，连接到我的商店。为了理解这个问题，这只是一个很小的例子。这个方法有效吗？people.filter（p=>p.country=='NZ'&&p.id===10）不，因为它必须是动态的，我必须能够在我的组件中切换这些过滤器。实际上，我有很多过滤器，不止两个。它们被分成不同的组件，连接到我的商店。为了理解这个问题，这只是一个很小的例子