时间戳

首页 > 解决方案 > 如何根据另一个数组的值创建数组过滤器 - React

javascript - 如何根据另一个数组的值创建数组过滤器 - React

问题描述

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

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

目前，我有能力创建一个静态过滤器，如：

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

标签： javascriptreactjs

解决方案

尝试这个

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

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

推荐阅读