过滤数组：如何订购过滤器

debugcn 发表于 Dev

丹那林

有2个组件：

设置状态的过滤器组件
一个输出组件，可根据过滤器呈现项目

有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",
},

您将如何编写它以使其起作用？过滤器的顺序应该不同还是我缺少其他方法？

扩展（下面的注释代码）：尝试遍历过滤器失败，因为您无法遍历状态对象：

    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] );}
    }

德鲁·里斯（Drew Reese）

问题

似乎每个过滤器操作都不能完全覆盖每个过滤器操作，因为每个过滤器操作会完全覆盖以前的任何过滤结果。

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;
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。