MERN项目中MongoDB文档wishlistItems数组分页筛选排序如何实现？

后端控制器核心问题修正 #

原有代码存在拼写错误、聚合阶段顺序错误、过滤逻辑错误、分页计算错误四类核心问题，修正后完整代码如下：

import mongoose from "mongoose";

export const getWishListUser = async (req, res) => {
  try {
    const searchTerm = req.query.name || "";
    let sort = req.query.sort ? Number(req.query.sort) : -1;
    const page = parseInt(req.query.page) || 1;
    const pageSize = parseInt(req.query.limit) || 4;
    const skip = (page - 1) * pageSize;

    // 构造匹配条件
    const baseMatch = [{ user: new mongoose.Types.ObjectId(req.user._id) }];
    if (searchTerm.trim()) {
      baseMatch.push({
        "wishlistItems.name": { $regex: searchTerm.trim(), $options: "i" },
      });
    }

    const aggregateResult = await WishlistUser.aggregate([
      { $match: { $and: baseMatch } },
      // 拆分商品数组，注意字段名不要拼写错误
      { $unwind: "$wishlistItems" },
      // 过滤符合搜索条件的单个商品
      ...(searchTerm.trim()
        ? [
            {
              $match: {
                "wishlistItems.name": {
                  $regex: searchTerm.trim(),
                  $options: "i",
                },
              },
            },
          ]
        : []),
      // 按日期排序
      { $sort: { "wishlistItems.date": sort } },
      // 分页逻辑：先跳过再限制条数，顺序不能反
      { $skip: skip },
      { $limit: pageSize },
      // 同时获取分页数据和匹配总条数，避免二次查询
      {
        $facet: {
          wishlistItems: [
            {
              $group: {
                _id: "$user",
                items: { $push: "$wishlistItems" },
              },
            },
          ],
          total: [{ $count: "count" }],
        },
      },
    ]);

    // 解析聚合结果
    const resultItems = aggregateResult[0]?.wishlistItems[0]?.items || [];
    const totalCount = aggregateResult[0]?.total[0]?.count || 0;
    const pages = Math.ceil(totalCount / pageSize);

    return res.status(200).json({
      wishlistItems: resultItems,
      total: totalCount,
      page,
      pages,
    });
  } catch (error) {
    return res.status(500).json({ errorMessage: `${error}` });
  }
};

前端代码优化 #

原有useEffect依赖项存在循环触发风险，同时需要适配后端返回结构，调整后代码如下：

const getWishlistUser = async (name, sort, page) => {
  const response = await axios.get(
    `http://localhost:5020/api/user/wishlist/get-wishlist-user?name=${name}&sort=${sort}&page=${page}`,
    config2
  );
  return response;
};

const gettingWishlistUser = (searchTerm, sort, page) => {
  setFavoriteProd({ ...favoriteProd, loading: true });
  getWishlistUser(searchTerm, sort, page)
    .then((response) => {
      setFavoriteProd({
        ...favoriteProd,
        wishlistItems: response.data.wishlistItems,
        count: response.data.total,
        loading: false,
      });
      setPages(response.data.pages);
    })
    .catch((error) => {
      setFavoriteProd({
        ...favoriteProd,
        errorMessage: error.toString(),
        loading: false,
      });
      setPages(1);
    });
};

useEffect(() => {
  if (isAuthenticated() && isAuthenticated().role === 0) {
    gettingWishlistUser(searchTerm, sort, page);
  }
// 移除pages依赖，避免循环请求
}, [page, sort, searchTerm]);

功能验证说明 #

• 分页：默认每页返回4条商品，切换页码可正常加载对应区间数据
• 筛选：输入商品名称关键词可模糊匹配对应商品，分页总数同步更新为匹配结果数量
• 排序：传入sort=1按日期升序排列，传入sort=-1按日期降序排列

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