RxJS concatMap导致数组元素重复增多问题求助

首先，咱们先理清楚你代码里的数据流逻辑，就能明白问题出在哪了：

你的原代码数据流问题 #

1. 你的getDomains()返回的是一个只发出一次值的Observable，这个值就是接口返回的3元素数组。
2. 你用concatMap(domains => domains.map(...))时，domains.map()会把原数组的每个元素转换成一个新的Observable（也就是你调用toDomainModel的结果），最终得到一个包含3个Observable的数组。
3. 而concatMap的核心行为是：对于上游发出的每个值，它会把这个值转换成Observable序列，然后依次订阅这些内部Observable，把它们的所有输出都发送到下游。

如果你的toDomainModel返回的Observable，每个都发出了一个3元素数组（比如错误地复用了原接口返回的数组），那concatMap就会把这3个数组依次发送到下游，最后toArray()会把它们收集成一个「包含3个3元素数组」的大数组——这就是你看到的重复/元素数量异常的原因。

为什么concatMap会这么做？ #

这就是concatMap的设计逻辑：它负责「投影+连接」Observable。上游每发一个值，你可以把它转换成一个Observable（或Observable数组/可迭代对象），concatMap会按顺序订阅这些内部Observable，把它们的每一个输出都平铺到下游。

在你的场景里，上游发的是一个数组，你却把它转换成了3个Observable，每个Observable又输出了一个数组，自然就会得到「数组套数组」的结果。

解决方案：先拆分数组，再处理单个元素 #

你的核心需求应该是：把接口返回的数组中每个元素转换成DomainModel（异步转换），过滤无效项后，得到一个有效模型的数组。正确的做法是先把上游的数组拆分成单个元素，再逐个处理：

const domains$ = this.myService.getDomains()
  .shareReplay()
  .mergeMap(domains => domains) // 把3元素数组拆分成3个单独的元素依次发出
  .concatMap(domain => this.toDomainModel(domain, myObservable)) // 对每个元素做异步转换
  .filter(domain => this.isValidDomain(domain)) // 过滤单个无效元素
  .toArray(); // 把所有通过过滤的元素收集成一个数组

这样修改后：

• mergeMap(domains => domains)会把原数组拆分成3个独立的domain元素，逐个发送到下游；
• 每个元素经过toDomainModel的异步转换后，输出单个DomainModel；
• 过滤掉无效模型后，toArray()会把剩下的有效元素收集成一个数组（比如你期望的1个元素）。

举个简单的类比例子 #

// 模拟你的原代码逻辑
const source = of([1,2,3]);
source.pipe(
  concatMap(arr => arr.map(num => of([num, num, num]))), // 每个元素转换成发三元数组的Observable
  toArray()
).subscribe(console.log);
// 输出：[[1,1,1], [2,2,2], [3,3,3]]

// 正确的拆分处理逻辑
source.pipe(
  mergeMap(arr => arr), // 拆成1、2、3依次发出
  concatMap(num => of(num * 2)), // 每个元素转换
  filter(num => num > 3), // 过滤
  toArray()
).subscribe(console.log);
// 输出：[4,6]

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