如何通过MongoDB其他集合的id关联数据填充React前端表格

一、后端Mongo关联查询（核心步骤） #

你当前存储的id关联MongoDB的user集合取数，常用两种实现方案：

方案1：使用Spring Data MongoDB的@DBRef注解（代码量最少） #

直接修改Customer实体类的关联字段配置，框架会自动完成关联查询：

public class Customer {
    @Id
    private String id;
    private String username;
    // 把原来存id的字段改成直接关联User实体，加@DBRef注解
    @DBRef
    private List<User> linkedUsers;
}

public class User{
    @Id
    private String id;
    private String name;
    private String surname;
    private List<LinkedUsersID> linkedUsersId;
}

配置后你直接调用Customer的DAO查询方法，框架会自动根据存储的id去user集合匹配对应的完整User数据，填充到linkedUsers字段中。
注意：该方案在关联数据量较大时会出现N+1查询性能问题，适合关联数据量小的场景

方案2：使用MongoDB原生$lookup聚合查询（性能最优） #

自己写聚合查询语句，一次性完成关联匹配，没有额外查询开销：

• 聚合逻辑步骤：
  • 第一步：根据你传入的customer id数组，匹配customer集合的对应数据
  • 第二步：添加$lookup阶段，指定关联集合为user，关联条件为user._id = customer.linkedUsersId，把匹配到的user数据挂载到返回字段中
  • 第三步：按需过滤返回字段，直接返回给前端即可

如果你不想修改原有实体类结构，也可以分两步手动处理：先根据customer id数组查所有Customer对象，提取出所有关联的user id，再批量查询user集合，手动把user字段拼接到Customer返回对象中即可。

二、接口与前端适配 #

• 后端封装查询接口，入参接收你的customer id数组，返回拼接好完整user数据的列表
• 前端React侧调用接口拿到完整数据后，直接绑定到表格组件的数据源即可，不需要额外做id匹配逻辑，表格列配置对应到返回的name、surname等字段就能正常渲染。

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