React中基于数组类型category实现产品复选框过滤求助

核心逻辑调整 #

由于你的产品数据中category是数组类型（每个产品可归属多个分类），不能直接用纯文本/ID的全等对比。需要通过检查产品分类数组与选中分类的交集来实现过滤：

代码实现 #

假设你的selectedCategory是存储选中分类ID的数组，在过滤产品时替换为以下逻辑：

// 假设products是你的产品数据源，selectedCategory是已选中的分类ID数组
const filteredProducts = products.filter(product => {
  // 未选中任何分类时，返回全部产品
  if (selectedCategory.length === 0) return true;
  // 判断产品的分类数组中是否包含至少一个选中的分类ID
  return selectedCategory.some(id => product.category.includes(id));
});

逻辑说明 #

• selectedCategory.length === 0：处理初始无选中状态，避免用户看不到任何产品
• Array.some() + Array.includes()：只要产品的分类数组里有一个ID在选中列表中，就保留该产品（适用于「多选分类，满足任一即显示」的场景）

补充：精准匹配所有选中分类 #

如果需要实现「必须包含所有选中分类才显示」的逻辑，将some替换为every即可：

return selectedCategory.every(id => product.category.includes(id));

内容的提问来源于stack exchange，提问作者Alexsander