前端分页配合前端过滤无法匹配跨页筛选商品问题咨询

API 探路者

2026-8-26

问题背景

我编写了如下后端代码用于实现商品分页查询，控制每页返回商品数量：

getProductsPagination: async (_, { page }) => {
  const skip = (page - 1) * 12;
  const limit = 12;
  const total = await Product.countDocuments();

  let query = Product.find({});

  query = query.skip(skip).limit(limit);
  const pages = Math.ceil(total / limit);

  const result = await query;
  return { products: result, numOfPages: pages };
},

目前在前端侧实现商品过滤逻辑，基础功能运行正常，但存在问题：粉色属性的商品全部位于第3页，当停留在第1页触发粉色过滤时，无法展示这些粉色商品，必须手动跳转到第3页才能看到匹配结果。询问是否可以仅通过前端逻辑解决该问题。
前端实现代码如下：

const { data, loading, error } = useQuery(GET_PRODUCTS_PAGINATION, {
    variables: { page },
  });

  const products = data?.getProductsPagination?.products;
  const numOfPages = data?.getProductsPagination?.numOfPages;

  useEffect(() => {
    setFilteredProducts(products);
    const applySort = (filteredList) => {
      return sort.length <= 0
        ? filteredList
        : sort.includes('price-highest')
        ? filteredList?.slice().sort((a, b) => b.price - a.price)
        : sort.includes('top-rated')
        ? filteredList?.slice().sort((a, b) => b.rates - a.rates)
        : filteredList?.slice().sort((a, b) => a.price - b.price);
    };
    const sizePredicate = (product) => {
      return size.length === 0 || product.size.includes(Number(...size));
    };
    const brandPredicate = (product) => {
      return brand.length === 0 || product.brand.includes(...brand);
    };
    const pricePredicate = (product) => {
      return (
        price.length === 0 ||
        (product.price > price[0][0] && product.price < price[0][1])
      );
    };

    const colorPredicate = (product) => {
      return color.length === 0 || product.color.includes(...color);
    };

    setFilteredProducts((filteredList) =>
      applySort(
        filteredList
          ?.filter(sizePredicate)
          ?.filter(brandPredicate)
          ?.filter(pricePredicate)
          ?.filter(colorPredicate)
      )
    );
  }, [products, sort, price, brand, size, test, color, page]);

解答

你当前这套写法仅靠现有前端逻辑无法解决问题，核心原因很简单：后端接口每次只返回当前页的12条商品，前端手里根本没有其他页的商品数据，所有过滤逻辑都只能在已经拉取到的当页12条数据里执行，自然找不到存在于第3页的粉色商品，和你写的过滤、排序规则本身没有关系。你现在代码里useEffect每次拿到当页返回的products就直接覆盖本地过滤数据源，相当于你永远只在12个商品里做筛选，结果不全是必然的。
如果坚持完全不改后端逻辑、纯前端解决，只有一种可行路径：放弃当前按需拉取单页数据的模式，一次性拉取全量所有商品数据存在前端状态里，再基于全量数据自行实现过滤、排序、分页逻辑。触发过滤条件时，直接在全量商品池里筛选匹配结果，筛选完成后自动重置到第1页展示即可。但这个方案缺陷非常明显：商品总量越大，首屏加载速度越慢，会浪费大量用户流量和带宽，只适合商品总数极少的场景。
还有一种不推荐的取巧方式：触发过滤时自动循环请求所有页码的接口，把所有页的数据拼接成本地全量数据集再做过滤，本质和一次性拉全量没有区别，还会产生多次重复请求，性能更差，完全不建议在生产环境使用。
生产环境最优方案是改造后端接口：把颜色、尺寸、品牌、价格、排序规则这些筛选参数作为变量传给后端，后端先按照筛选条件查询匹配的商品集合，再对筛选后的集合做分页计算，返回对应页的商品数据和筛选后的总页数。这种模式下，用户触发过滤时前端直接请求筛选条件下的第1页数据即可，从根源上避免跨页找不到匹配商品的问题，性能和用户体验都最好。

内容的提问来源于stack exchange，提问作者עמית שוקרון