Question

我正在我的应用程序中创建一个组件，该组件列出了所有要出售的产品。然后，我要创建一个过滤组件，用户可以在其中打开带有许多复选框的模式。他们选择了要过滤的不同选项，产品列表会自动更新。

每个选定的项目都会进入一个名为“选定项目”的新数组，每次单击复选框时，该数组都会自动更新。

目前，我可以创建一个静态过滤器，例如：

var A = products.filter(e => e.categories.find(category => category.slug === "movies"));

function showA() {
  setfilteredProducts(A)
}

或具有两个参数，例如：

var B = products.filter(e => e.categories.find(category => category.slug === "movies") && e.categories.find(category => category.slug === "books"));

function showB() {
  setfilteredProducts(B)
}

但是我正在寻找一种修改过滤器功能的方法，以便它将基于所选的所有项目进行过滤。因此，与其像在var B中那样写e.categories.find(category => category.slug === "movies") && e.categories.find(category => category.slug === "books")，不如遍历我选择的数组并根据需要创建e.categories.find(category => category.slug === "movies") &&多次。

我对如何使它工作有点困惑。我可能不太清楚地解释它，因此如有必要，我可以提供更多详细信息。但是，如果有足够的信息，将不胜感激。

更新：

保存所选项目列表的数组是：

const newArr = state.theme.filters.categories.flatMap(category => category.data).filter(item => item.checked);

Answer 1

尝试

AndroidManifest.xml

提示：总是将代码拆分为一些小函数，这使编码更容易且更有意义

Answer 2

如果我对它的理解正确，那么如果您具有列出的所有类别的产品，则您有一个要过滤的产品列表。因此，您可以使用every函数，如下所示：

function filterProductsByCategories(products, categories) {
  return products.filter(p =>
    categories.every(category =>
      p.categories.map(c => c.slug).includes(category)
    )
  );
}

var Products = [{
    name: "Prod A",
    categories: [{
      slug: "movies"
    }]
  },
  {
    name: "Prod B",
    categories: [{
      slug: "books"
    }]
  },
  {
    name: "Prod C",
    categories: [{
      slug: "books"
    }, {
      slug: "movies"
    }]
  }
];

var a = filterProductsByCategories(Products, ["movies"]); // Returns Prod A, C
var b = filterProductsByCategories(Products, ["books", "movies"]); // Returns Prod C

console.log(a, b)

Answer 3

使用.every和.includes

var filterProductsByCategories = (products, selections) => {
  return products.filter(product => {
    var categories = product.categories.map(category => category.slug);
    return selections.every(selection => categories.includes(selection));
  })
}

var Products = [
  {name: "Prod A", categories:[{slug: "movies"}]},
  {name: "Prod B", categories:[{slug: "books"}]},
  {name: "Prod C", categories:[{slug: "books"}, {slug: "movies"}]}
];

var a = filterProductsByCategories(Products, ["movies"]); // Returns Prod A, C
var b = filterProductsByCategories(Products, ["books", "movies"]); // Returns Prod C
console.log(a,b)

如何基于另一个数组的值创建数组过滤器-React

3 个答案: