MERN Web应用API数据重复渲染：6条数据显示36条问题排查求助

问题根源 #

问题出在后端API的MongoDB聚合查询逻辑，前端渲染逻辑没有问题：

• 你在kamForm集合上执行聚合操作，同时$lookup关联的from字段填的也是kamforms（即同一个集合做自关联），关联条件是userId字段匹配。如果当前userId下共有6条数据，那么每一条原始记录都会关联匹配到全部6条数据，经过$unwind拆分后就会生成6*6=36条重复记录，和你遇到的现象完全吻合。
• 额外逻辑漏洞：当存在排序参数时，你重写聚合管道时把$lookup的from字段改成了kams，两个分支关联的集合不一致，会导致排序场景下返回数据结构异常。

修复方案 #

1. 优先修改后端聚合逻辑：你的需求只是按条件查询kamForm集合的记录，完全不需要做关联查询，直接删除$lookup和$unwind步骤即可，修改后的聚合逻辑参考：

let arr = [
  { $match: findParams }
];
if (Object.keys(sortParams).length > 0) {
  arr.push({ $sort: sortParams });
}

如果逻辑允许，甚至可以直接替换为find查询，性能更优：

kamForm.find(findParams).sort(sortParams).then(posts => {
  // 原有返回逻辑
})

2. 增加兜底去重逻辑：可以在前端保存数据时，按记录唯一ID去重，避免后续其他逻辑导致重复：

setKamforms(
  Array.from(new Map(
    response.data
      .filter(obj => obj.kcpnid)
      .map(item => [item._id, item])
  ).values())
)

3. 非必改优化点：前端列表渲染的key不要用索引index，替换为item._id这类全局唯一值，避免列表重排时出现渲染异常。

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