RxJS中空数组赋值与distinctUntilChanged操作符冲突问题解决

你原来的代码问题出在操作符顺序错误和逻辑判断偏差：filter放在tap前面导致长度≤1的query直接被过滤，tap根本没机会执行；而且你判断的是length===1，但需求是length===0时重置数组。

下面是两种可行的解决办法：

方案一：单流处理，前置tap逻辑 #

把处理空查询的tap放在最前面，确保所有发出的query都能被检查，再过滤出需要请求的query：

o$.pipe(
  // 先处理所有query，空值时直接重置本地数据
  tap((query) => {
    if (query.length === 0) {
      this.localData = [];
    }
  }),
  // 只保留长度>1的query去发起请求
  filter((query) => query.length > 1),
  distinctUntilChanged(), // 避免重复请求相同query
  switchMap((query) => this.data.query(query))
).subscribe((data) => {
  this.localData = data;
});

这个方案的优势是简洁，所有逻辑在一个流里完成；如果你的o$会重复发出空字符串，可以给tap前面加distinctUntilChanged()避免重复赋值。

方案二：拆分流，分离逻辑 #

用partition把流拆成「空查询」和「非空查询」两个分支，各自处理逻辑，更清晰易维护：

// 拆分出空查询和非空查询的两个流
const [emptyQuery$, validQuery$] = o$.pipe(
  partition((query) => query.length === 0)
);

// 处理空查询：重置本地数据
emptyQuery$.pipe(
  distinctUntilChanged() // 可选，避免重复赋值
).subscribe(() => {
  this.localData = [];
});

// 处理有效查询：发起请求并赋值
validQuery$.pipe(
  filter((query) => query.length > 1),
  distinctUntilChanged(),
  switchMap((query) => this.data.query(query))
).subscribe((data) => {
  this.localData = data;
});

这种方式把不同逻辑完全分离，后续修改空查询或请求逻辑时互不影响，适合复杂场景。

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