React中选择新分类时如何重置商品数组过滤器？

核心问题出在你过滤时用的是当前的products状态，而这个状态已经是之前过滤后的结果，导致每次新分类都是在子集里再筛选，自然数据不对。

直接改这一点就行：把过滤的数据源从products换成你保存的原始全量数据productsUnsorted，这样每次点击分类都是从完整的商品列表里筛选，不会被之前的过滤结果影响。

修改后的分类过滤器代码：

{!loading
  ? webshopData.categories?.map((item) => {
      // 从productsUnsorted过滤，而非当前已过滤的products
      const filtered = productsUnsorted.filter((obj) =>
        item.products.$each.includes(obj._id)
      );

      return (
        <div
          className="productsCategorySelector"
          onClick={() => setProducts(filtered)}
          key={item.name}
        >
          <p className="label-form productsCategoryLabel">
            {item.name}
          </p>
        </div>
      );
    })
  : null}

原理很直白：products是用来控制页面展示的动态状态，会随用户操作变化；而productsUnsorted是固定的原始全量数据，作为所有过滤操作的基准，这样不管用户切换多少次分类，都是从完整列表里重新筛选，不会出现越滤越少的问题。

如果之后要加更多过滤条件（比如搜索、价格区间），建议维护一个「当前激活的过滤规则」状态，每次根据productsUnsorted和所有激活规则计算最终展示的products，这样扩展性更好，但当前场景改数据源就能解决问题。

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