React中如何同时实现商品筛选与排序功能？

你的问题核心在于处理逻辑依赖状态值、操作原地修改数组，以及effect依赖不合理，导致筛选和排序无法协同工作。下面是具体的修正方案：

问题分析 #

1. handleSort直接对filteredProducts状态做原地排序（Array.sort会修改原数组），且两个处理函数都依赖状态值，导致操作互相干扰；
2. handleDiscountFilters接收的filterResults参数未被使用，反而直接依赖filteredProducts，筛选逻辑没有基于中间结果；
3. useEffect依赖filteredProducts，每次更新状态后会再次触发effect，形成不必要的循环，且处理顺序的逻辑实现有误。

修正代码 #

const [products, setProducts] = useState([]); // 假设这是你Axios获取的原始数据
const [filteredProducts, setFilteredProducts] = useState([]);

// 重构排序函数：纯函数，接收待排序数组和排序规则，返回新数组
const handleSort = (productsToSort, sortByValue) => {
  const sorted = [...productsToSort]; // 复制数组避免原地修改
  sorted.sort((a, b) => {
    switch(sortByValue) {
      case 'new': return parseISO(b.created_at) - parseISO(a.created_at);
      case 'discount': return b.discount - a.discount;
      case 'price_desc': return b.price - a.price;
      case 'price_asc': return a.price - b.price;
      default: return a.name.localeCompare(b.name);
    }
  });
  return sorted;
};

const discount = queryParams.get('discount');
const sortBy = queryParams.get('sort');

// 重构筛选函数：纯函数，接收待筛选数组和折扣阈值，返回新数组
const handleDiscountFilters = (productsToFilter, discountThreshold) => {
  if(discountThreshold) {
    const threshold = Number(discountThreshold); // 转为数字避免字符串比较错误
    return productsToFilter.filter(product => product.discount > threshold);
  }
  return [...productsToFilter];
};

// 从原始数据出发，先筛选再排序
useEffect(() => {
  // 第一步：应用折扣筛选
  let processedProducts = handleDiscountFilters(products, discount);
  // 第二步：应用排序（如果有排序规则）
  if (sortBy) {
    processedProducts = handleSort(processedProducts, sortBy);
  }
  // 更新最终结果状态
  setFilteredProducts(processedProducts);
}, [products, discount, sortBy]); // 仅依赖原始数据和筛选排序条件

关键修改点 #

• 以原始数据为起点：每次筛选排序都从products（Axios获取的全量数据）开始，确保操作不会累积之前的状态变化；
• 纯函数化处理：两个处理函数只依赖传入的参数，不依赖组件状态，逻辑更清晰且无副作用；
• 避免原地修改：排序前先复制数组，防止修改原数据导致的状态混乱；
• 精简effect依赖：只监听products、discount、sortBy，避免不必要的重复执行和循环更新；
• 类型转换：将queryParams获取的折扣字符串转为数字，避免字符串比较的潜在错误。

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