使用RxJS 7.8.0的groupBy操作符分组数据无结果问题求助

环境与数据结构 #

• RxJS版本：7.8.0
• API返回的Observable数据结构：

[
  {
    "id": 1,
    "date": 1693229400000,
    "name": "event name",
    "impact": "Low"
  },
  {
    "id": 2,
    "date": 1693229400000,
    "name": "event name",
    "impact": "Low"
  },
  {
    "id": 3,
    "date": 1693229400000,
    "name": "event name",
    "impact": "Middle"
  }
]

当前问题代码 #

events$ = this.onSubmit.pipe(
  switchMap((dateRange) => this.eventService.getEvents())
).pipe(
  mergeMap(res => res),
  groupBy(i => i.impact),
  mergeMap(group => group.pipe(toArray())),
).subscribe(res => console.log('RESULT', res));

问题排查与修复 #

可能的无输出原因 #

1. onSubmit 未触发：比如对应的表单提交/按钮点击事件没有发生，导致整个流未启动
2. eventService.getEvents() 未返回数据：API请求失败、无响应，或者返回的Observable未发出值
3. RxJS分组逻辑依赖上游流完成：groupBy 配合 toArray() 需要上游流完成后，才会输出分组后的数组。如果 getEvents() 返回的Observable未完成（比如是持续数据流），分组结果不会被推送

修复方案 #

方案1：改用数组原生方法分组（推荐，更直观）

直接在获取到的事件数组上使用 reduce 分组，无需拆分数据流，逻辑更简单：

events$ = this.onSubmit.pipe(
  switchMap((dateRange) => this.eventService.getEvents()),
  // 将数组按impact分组为对象，key为impact值，value为对应事件数组
  map(events => events.reduce((groups, event) => {
    const impact = event.impact;
    groups[impact] = groups[impact] || [];
    groups[impact].push(event);
    return groups;
  }, {} as Record<string, typeof events>))
).subscribe(res => console.log('RESULT', res));

输出结果：

{
  "Low": [
    {"id":1,"date":1693229400000,"name":"event name","impact":"Low"},
    {"id":2,"date":1693229400000,"name":"event name","impact":"Low"}
  ],
  "Middle": [
    {"id":3,"date":1693229400000,"name":"event name","impact":"Middle"}
  ]
}

方案2：调整RxJS流逻辑

如果坚持使用RxJS的 groupBy，需确保上游流正常完成，同时增加错误捕获排查问题：

events$ = this.onSubmit.pipe(
  switchMap((dateRange) => this.eventService.getEvents()),
  mergeMap(res => res),
  groupBy(item => item.impact),
  mergeMap(group => group.pipe(toArray()))
).subscribe({
  next: res => console.log('RESULT', res),
  error: err => console.error('ERROR', err), // 捕获API请求错误
  complete: () => console.log('STREAM COMPLETED') // 确认流是否完成
});

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