如何在React+Redux多筛选复选框中添加价格区间筛选逻辑？

问题背景 #

我正在开发基于React和Redux的多筛选复选框功能，需实现以下价格区间筛选逻辑：

• 价格≤250
• 250<价格≤450
• 价格>450

当前用if-else实现的筛选Reducer在多选复选框时失效，仅能生效第一个匹配的价格区间，以下是现有代码：

case actionTypes.FILTER_PRODUCT:
      const searchParameters = data && Object.keys(Object.assign({}, ...data));
      let filterData;
      console.log('test',action.payload);
      const searchQuery = action.payload.map((val) => val.toLowerCase());
      const getItemParam = (item, parameter) =>
        (item[parameter] ?? "").toString().toLowerCase();

      if (action.payload.length === 0) {
        filterData = state.products;
      } 
      else if(action.payload.includes('0-Rs250')){
        filterData = state.products.filter((item) => {
          return item.price <= 250
        })
      }
      else if(action.payload.includes('Rs251-450')){
        data = state.products.filter((item) => {
          return item.price > 250 && item.price <= 450
        })

      }else if(action.payload.includes('Rs 450')){
        filterData = state.products.filter((item) => {
          return item.price > 450
        })
      }
      else {
        filterData = state.products.filter((item) => {
          return searchParameters.some((parameter) => {
            const itemParam = getItemParam(item, parameter);

            return searchQuery.some(
              (color) => itemParam === color)
          });
        });
      }
      console.log('test1',filterData);
      return {
        ...state,
        filteredData: filterData,
      };

问题原因 #

原代码使用互斥的if-else逻辑，一旦匹配到第一个价格区间条件就会跳过后续判断，导致多选价格区间时只能保留第一个匹配区间的商品，无法合并多个区间的结果。

解决方案 #

重构筛选逻辑，将价格区间判断改为多条件逻辑或（OR），收集所有选中的价格条件后，过滤出满足任意一个选中区间的商品；同时保留与其他筛选维度的组合能力：

case actionTypes.FILTER_PRODUCT:
  const searchParameters = data && Object.keys(Object.assign({}, ...data));
  let filterData = [...state.products]; // 初始化为全部商品
  const selectedFilters = action.payload.map(val => val.toLowerCase());
  const getItemParam = (item, parameter) =>
    (item[parameter] ?? "").toString().toLowerCase();

  // 收集选中的价格区间判断条件
  const priceConditions = [];
  if (selectedFilters.includes('0-rs250')) {
    priceConditions.push(item => item.price <= 250);
  }
  if (selectedFilters.includes('rs251-450')) {
    priceConditions.push(item => item.price > 250 && item.price <= 450);
  }
  if (selectedFilters.includes('rs 450')) {
    priceConditions.push(item => item.price > 450);
  }

  // 应用价格筛选：满足任意选中的价格区间即可
  if (priceConditions.length > 0) {
    filterData = filterData.filter(item => 
      priceConditions.some(condition => condition(item))
    );
  }

  // 处理其他非价格筛选条件（如颜色、分类等）
  const nonPriceFilters = selectedFilters.filter(filter => 
    !['0-rs250', 'rs251-450', 'rs 450'].includes(filter)
  );
  if (nonPriceFilters.length > 0 && searchParameters) {
    filterData = filterData.filter(item => 
      searchParameters.some(parameter => {
        const itemParam = getItemParam(item, parameter);
        return nonPriceFilters.some(filter => itemParam === filter);
      })
    );
  }

  // 无筛选条件时返回全部商品
  if (action.payload.length === 0) {
    filterData = state.products;
  }

  console.log('filteredData:', filterData);
  return {
    ...state,
    filteredData: filterData,
  };

关键修改点 #

1. 取消互斥判断：用数组收集所有选中的价格条件，通过some实现多区间的逻辑或，支持多选价格区间合并结果
2. 筛选逻辑分层：先处理价格筛选，再叠加其他维度的筛选，保证多筛选条件可以组合生效
3. 统一大小写匹配：将所有筛选标识转为小写，避免大小写不一致导致的匹配失效
4. 初始值合理设置：默认将filterData设为全部商品，逐步应用筛选条件，逻辑更清晰

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