Javascript 如何基于另一个数组的值创建数组筛选器-React

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

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

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

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

但是我正在寻找一种方法来修改filter函数，以便它能够根据所选的所有项目进行过滤。因此，它不会像在var B中那样编写

e.categories.find（category=>category.slug==“movies”）&&e.categories.find（category=>category.slug==“books”）

而像在var B中一样循环我所选项目的数组，并根据需要多次创建

e.categories.find（categories=>category.slug==“movies”）&

我有点困惑如何让它工作。我可能解释得不太清楚，所以如果有必要，我可以提供更多细节。但是如果有足够的信息，任何帮助都将不胜感激

更新：

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

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

试试这个

function filterProductsHandler(products, filterOptionsArray) {
  const filteredProducts = products.filter( product => {
    checkAllCategoriesExist(product, filterOptionsArray);
  });
  setfilteredProducts(B)
}

function checkCategoryExist(product, categoryName) {
  return product.categories.find(category => category.slug === categoryName)
}  

function checkAllCategoriesExist(product, categoriesArr) {
  let isMatch = true;
  categoriesArr.forEach( category => {
    if ( !checkCategoryExist(product, category ) )
      isMatch = false) ;      
    });
  return isMatch;
}

---

提示：总是将代码拆分为小函数会使编码更容易，也更有意义

如果我理解正确，您有一个要筛选的产品列表，如果它们包含您提供的列表中的所有类别。 为此，您可以使用如下函数：

函数过滤器ProductsByCategories（产品、类别）{
返回产品。过滤器（p=>
类别。每个（类别=>
p、 categories.map（c=>c.slug）.includes（category）
)
);
}
var乘积=[{
名称：“Prod A”，
类别：[{
鼻涕虫：“电影”
}]
},
{
名称：“产品B”，
类别：[{
鼻涕虫：“书”
}]
},
{
名称：“产品C”，
类别：[{
鼻涕虫：“书”
}, {
鼻涕虫：“电影”
}]
}
];
var a=filterProductsByCategories（产品，[“电影]）；//返回产品A、C
var b=过滤器产品分类（产品，[“书籍”，“电影]）；//返回产品C
console.log（a，b）

使用

。每个
和
都包括

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)

这回答了你的问题吗@如果不是这样的话，我总是会得到一个错误，因为产品是未定义的，即使它是。你知道为什么会这样吗？也许你放弃了把变量传递给函数？看起来有了这个选项，我仍然会硬编码要过滤的类别（VarB）。是否有一种方法可以根据所选类别数组中的项目进行过滤？当您说“硬编码类别”时，您是指
[“书籍”、“电影”]
？这些将是
newArr
不是吗？