多选Checkbox数组过滤问题：多条件筛选时出现重复数据

问题现象 #

使用Checkbox实现食品分类筛选时，单个筛选条件可正常生效，但多条件同时勾选时，foodlists数组会出现重复数据。例如勾选veg（素食）和discount（折扣）选项时，需要仅展示同时满足两个条件的产品，但当前代码会为每个条件单独生成一份分类数据并推入结果数组，导致重复。

原代码问题分析 #

原代码逻辑是遍历每个活跃筛选条件，对每个条件单独筛选分类下的产品后，立即将整个分类对象推入foodLists。这种方式会导致：

• 有N个活跃条件，同一个分类就会被推入N次，造成数据重复
• 没有实现"多条件交集筛选"，而是各条件独立筛选，无法得到同时满足所有条件的产品集合

修复后的代码 #

import {isAvailable} from "../../utils/customFunctions";

export const getFilterFood=(data, filterKey)=>{
    // 筛选出所有激活的筛选条件
    const activeFilters = filterKey?.filter(item => item?.isActive) || [];
    
    // 生成对应的筛选条件判断函数集合
    const filterPredicates = activeFilters.map(filter => {
        switch(filter.value){
            case "nonVeg":
                return (food) => food?.veg === 0;
            case "veg":
                return (food) => food?.veg === 1;
            case "currentlyAvailable":
                return (food) => isAvailable(food.available_time_starts, food.available_time_ends);
            case "discount":
                return (food) => food?.discount > 0; // 假设discount>0表示有折扣
            default:
                return () => true; // 默认返回true，不影响筛选
        }
    });

    const foodLists = [];
    data?.forEach(category => {
        // 对当前分类的产品应用所有筛选条件（交集：满足所有条件）
        const filteredProducts = category?.products?.filter(food => {
            return filterPredicates.every(predicate => predicate(food));
        }) || [];

        // 仅保留有符合条件产品的分类，避免空分类
        if(filteredProducts.length > 0){
            foodLists.push({
                ...category,
                products: filteredProducts
            });
        }
    });

    return foodLists;
}

关键优化点 #

1. 条件交集处理：使用filterPredicates.every(predicate => predicate(food))确保产品必须满足所有激活的筛选条件
2. 避免重复数据：每个分类仅在处理完所有筛选条件后，统一添加一次到结果数组
3. 空分类过滤：仅将包含符合条件产品的分类加入结果，避免展示空分类
4. 可扩展性：通过switch-case统一管理筛选条件，新增条件只需添加对应的判断函数即可

内容的提问来源于stack exchange，提问作者ziaul hoque bappy