我正在使用多过滤器的react 和还原复选框.在以下情况下如何添加额外的价格筛选逻辑:

  1. 价格范围不到250

  2. 价格范围在251到450之间

  3. 价格范围大于450

以下是减滤器的代码.try 了If Else条件,但问题是如果单击多个复选框则不起作用

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 if - else更改为if - if - if,将条件从exclusive OR更改为inclusive OR.

示例:

从最初空的过滤结果集开始,并且对于每个过滤标准过滤101原始的state.productsarray.

case actionTypes.FILTER_PRODUCT:
  ...

  let filteredData = [];

  ...

  if (action.payload.length) {
    if (action.payload.includes("0-Rs250")) {
      filteredData.push(...state.products.filter((item) => {
        return item.price <= 250;
      }));
    }
    if (action.payload.includes("Rs251-450")) {
      filteredData.push(...state.products.filter((item) => {
        return item.price > 250 && item.price <= 450;
      }));
    }
    if (action.payload.includes("Rs 450")) {
      filteredData.push(...state.products.filter((item) => {
        return item.price > 450;
      }));
    }
  } else {
    filteredData = state.products.filter(/* filter by searchParams */);
  }

  return {
    ...state,
    filteredData,
  };

另一种 Select 是使用更内联的解决方案:

case actionTypes.FILTER_PRODUCT:
  ...

  const filteredData = state.products.filter((item) => {
    if (action.payload.length) {
      return (
        (action.payload.includes("0-Rs250") && item.price <= 250) ||
        (action.payload.includes("Rs251-450") &&
          item.price > 250 &&
          item.price <= 450) ||
        (action.payload.includes("Rs 450") && item.price > 450)
      );
    }
    return /* filter by searchParams */;
  });

  return {
    ...state,
    filteredData,
  };

第二种方法保留了源数组中产品的原始顺序.

Reactjs相关问答推荐

NextJs Form不允许我输入任何输入,

在REACT-RUTER-DOMV6中使用通用页面包装组件有问题吗?

获取未捕获的错误:Gatsby生产版本上的最小化react 错误#418

获取更改后的状态值

状态更改时的rtk查询触发器

为什么我的react 简单计时器项目不起作用?

如何清除过滤器搜索的状态

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

面临 React 模式中点击外部条件的问题

对于 ref 上的可见 prop 或 open 方法来react 组件,哪种方式更好?

无法从子组件传递数据到父组件

即使配置了 webpack.config.js,html-loader 也不起作用

将props 传递给 NextJS 布局组件

如何通过onpress on view in react native flatlist来降低和增加特定视图的高度?

react-markdown 不渲染 Markdown

为什么我在此代码段中看不到 useEffect for count = 1?

React如何在用户登录后等待当前用户数据被获取

react 路由路由加载器不适用于嵌套组件

在视图列表上react 本机无限循环的反弹动画?

在react 路由dom版本6中的组件内添加路由