筛选数组:如何排序筛选器

Question

有两个组成部分：

1. 是设置状态
2. 的筛选器组件，状态
3. 是基于筛选器

呈现项的输出组件。

有两个数组：

1. 所有项的数组
2. 是所选筛选选项的数组。

    let itemsFiltered;
    if (this.state.continent !== "") { itemsFiltered = items.filter( (item) => item.continent == this.state.continent ); }
    if (this.state.country !== "") { itemsFiltered = items.filter( (item) => item.country == this.state.country ); }
    if (this.state.region !== "") { itemsFiltered = items.filter((item) => item.region == this.state.region); }
    if (this.state.activity !== "") { itemsFiltered = items.filter((item) => item.activity == this.state.activity); }
    if (this.state.skill !== "") { itemsFiltered = items.filter((item) => item.skill == this.state.skill); }

问题:它不适用于技能和地区。对于技能，它是工作的，如果它是首先选择，但不是如果其他选择已经作出。对于区域，它根本不应用过滤器。因此，它只显示与过滤器集无关的所有项。它适用于所有其他过滤器和它们的组合。

这就是数据看起来的样子(虚拟的)：

{
    title: "Item 1",
    description: "Description of the item",
    image: imageItem1,
    continent: "europe",
    country: "portugal",
    region: "norte",
    activity: "kite",
    skill: "proLocal",
},

你怎么写这个才能起作用？是否应该对过滤器进行不同的排序，还是缺少另一种方法？

扩展(代码到下面的注释)：试图通过过滤器迭代失败，因为您不能通过state对象迭代：

    let itemsFiltered = items.slice();
    const filtersSet = ["continent", "country", "region", "activity", "skill"]
    for (let i = 0; i < filtersSet.length; i++) {
      if (this.state.filtersSet[i] !== "") {itemsFiltered = itemsFiltered.filter( item => item.filtersSet[i] == this.state.filtersSet[i] );}
    }

Answer 1

问题

看起来不像任何单个过滤器都应该进行过滤，因为每个过滤器操作都完全覆盖了以前的任何筛选结果。

let itemsFiltered;
if (this.state.continent !== "") {
  itemsFiltered = items.filter(
    (item) => item.continent == this.state.continent
  );
}
if (this.state.country !== "") {
  itemsFiltered = items.filter((item) => item.country == this.state.country);
}
if (this.state.region !== "") {
  itemsFiltered = items.filter((item) => item.region == this.state.region);
}
if (this.state.activity !== "") {
  itemsFiltered = items.filter((item) => item.activity == this.state.activity);
}
if (this.state.skill !== "") {
  itemsFiltered = items.filter((item) => item.skill == this.state.skill);
}

解决方案

可以从上一次筛选操作的结果中筛选每个后续筛选器。

let itemsFiltered = items.slice();
if (this.state.continent !== "") {
  itemsFiltered = itemsFiltered.filter(item => item.continent === this.state.continent);
}
if (this.state.country !== "") {
  itemsFiltered = itemsFiltered.filter(item => item.country === this.state.country);
}
if (this.state.region !== "") {
  itemsFiltered = itemsFiltered.filter(item => item.region === this.state.region);
}
if (this.state.activity !== "") {
  itemsFiltered = itemsFiltered.filter(item => item.activity === this.state.activity);
}
if (this.state.skill !== "") {
  itemsFiltered = itemsFiltered.filter(item => item.skill == this.state.skill);
}

或者，为了节省大量数组迭代，可以在一个过滤器函数中完成所有这些工作。

const itemsFiltered = items.filter((item) => {
  if (this.state.continent) return item.continent === this.state.continent;
  if (this.state.country) return item.country === this.state.country;
  if (this.state.region) return item.region === this.state.region;
  if (this.state.activity) return item.activity === this.state.activity;
  if (this.state.skill) return item.skill === this.state.skill;
  return true;
});