MERN应用中去除重复brand数据：Filter能否替代Map及实现方法

在MERN应用中，我用Node.js从MongoDB获取数据，前端以商品详情页的方式渲染，目前功能正常，但map运算符会渲染出brand字段重复的条目（比如存在_id不同但brand相同的文档）。我想仅保留每个brand的唯一条目，请问能否用filter替代map实现？该怎么操作？

同时我也想知道，后端接口能不能直接返回每个brand唯一的文档？

我的前端渲染代码：

return (
    <>
      {feeds &&
        feeds.map((data) => (                           // 问题出在这里
          <Link to={`/car-brand/${data?.brand}`}>
            <Flex
              alignItems={"center"}
              justifyContent="center"
              flexDirection={"row"}
              marginTop={"1rem"}
              sx={{
                "@media screen and (max-width: 960px)": {
                  flexDirection: "column",
                },
              }}
            >
              <div>
                <motion.div
                  whileHover={{
                    scale: 1.1,
                    boxShadow:
                      "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
                  }}
                  style={CardStyle}
                >
                  <img
                    style={Image}
                    // src={data.thumbnailImg}
                    alt="Card image cap"
                  />
                </motion.div>
              </div>
            </Flex>
          </Link>
        ))}
    </>
  );

数据文档结构示例：

• 文档1：_id任意，brand为xyz
• 文档2：_id任意，brand为hfgj
• 文档3：_id任意，brand为xyz

希望最终只获取文档1和文档2（每个brand唯一）。

我的后端接口代码：

const User = require("../models/User");
const Image = require("../models/Image");

const addImage = async (req, res, next) => {
  const newImage = new Image({ userId: req.user.id, ...req.body });
  try {
    const saveImage = await newImage.save();
    res.status(200).json("Image uploaded");
  } catch (error) {
    next(error);
  }
};

// 根据ID获取图片
const getImage = async (req, res) => {
  try {
    const image = await Image.findById(req.params.id);
    res.status(200).json(image);
  } catch (error) {
    res.status(500).json(error);
  }
};

// 获取所有图片
const getAllImages = async (res) => {
  try {
    const images = await Image.find();
    res.status(200).json(images);
  } catch (error) {
    res.status(500).json(error);
  }
};

// 根据品牌获取图片
const getImagesByBrand = async (req, res) => {
  const qBrand = req.query.brand;
  try {
    const images = await Image.find( {brand: qBrand});
    res.status(200).json(images);
  } catch (error) {
    res.status(500).json(error);
  }
};

module.exports = Object.freeze({
  addImage,
  getImage,
  getImagesByBrand,
  getAllImages,
});

一、前端处理：用filter配合记录已出现的brand #

不能直接用filter替代map，但可以先通过filter去重，再用map渲染。核心思路是维护一个判断逻辑，只保留每个brand的第一个出现条目。

修改前端代码如下：

return (
    <>
      {feeds &&
        feeds.filter((data, index, self) => {
          // 只保留每个brand第一次出现的条目
          return index === self.findIndex(item => item.brand === data.brand);
        }).map((data) => (
          <Link to={`/car-brand/${data?.brand}`} key={data._id}>
            <Flex
              alignItems={"center"}
              justifyContent="center"
              flexDirection={"row"}
              marginTop={"1rem"}
              sx={{
                "@media screen and (max-width: 960px)": {
                  flexDirection: "column",
                },
              }}
            >
              <div>
                <motion.div
                  whileHover={{
                    scale: 1.1,
                    boxShadow:
                      "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px",
                  }}
                  style={CardStyle}
                >
                  <img
                    style={Image}
                    // src={data.thumbnailImg}
                    alt="Card image cap"
                  />
                </motion.div>
              </div>
            </Flex>
          </Link>
        ))}
    </>
  );

说明：

• findIndex会返回当前brand第一次出现的索引，只有当当前索引等于这个值时，才保留该条目，实现去重。
• 给map的元素加上key属性（用data._id），符合React的渲染规范。

二、后端处理（更推荐）：直接返回去重后的结果 #

前端去重会浪费带宽（仍需传输重复数据），更优的方式是在MongoDB层面直接获取每个brand的唯一文档，有两种实现方式：

方式1：使用MongoDB聚合查询（性能最优） #

修改getAllImages接口，用$group按brand分组，取每个组的第一个文档：

const getAllImages = async (req, res) => { // 补上遗漏的req参数
  try {
    const images = await Image.aggregate([
      {
        $group: {
          _id: "$brand", // 按brand字段分组
          doc: { $first: "$$ROOT" } // 保留每个分组的第一个完整文档
        }
      },
      {
        $replaceRoot: { newRoot: "$doc" } // 将分组后的文档作为根结构返回
      }
    ]);
    res.status(200).json(images);
  } catch (error) {
    res.status(500).json(error);
  }
};

方式2：先获取唯一brand列表，再逐个查询第一个文档 #

如果觉得聚合查询复杂，可以用这种更直观的方式：

const getAllImages = async (req, res) => {
  try {
    // 获取所有不重复的brand值
    const uniqueBrands = await Image.distinct("brand");
    // 遍历每个brand，查询对应第一个文档
    const uniqueImages = await Promise.all(
      uniqueBrands.map(brand => Image.findOne({ brand }))
    );
    res.status(200).json(uniqueImages);
  } catch (error) {
    res.status(500).json(error);
  }
};

说明：聚合查询的性能更好，尤其是数据量大时，仅需一次数据库请求即可完成去重。

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