Angular中BehaviorSubject分页加载更多数据重复问题排查

你遇到的加载更多数据重复问题，大概率是以下几个原因之一，对应解决方案如下：

1. 重复订阅未清理 #

如果组件在初始化时的订阅没有在销毁时取消，或者每次点击“加载更多”时都重新创建订阅，会导致多个订阅同时生效。每当apiBehavior$推送新数据时，所有订阅都会执行一次，把新数据重复推入questions数组。

解决办法：
用takeUntil操作符结合组件销毁钩子清理订阅，且仅在组件初始化时创建一次订阅：

private destroy$ = new Subject<void>();

ngOnInit() {
  this.apiService.apiBehavior$
    .pipe(takeUntil(this.destroy$))
    .subscribe(newPageData => {
      this.questions.push(...newPageData);
    });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

2. BehaviorSubject错误推送全量数据 #

如果服务在处理分页请求时，把之前所有页的数据和新页数据合并后再next到apiBehavior$，组件订阅后每次都会收到全量数据，推入数组就会导致重复。

解决办法：
服务仅推送当前页的新数据，不要包含历史数据：

// 服务中的分页请求逻辑示例
loadMore(page: number) {
  this.http.get(`/api/questions?page=${page}`).subscribe(newPageData => {
    this.apiBehavior$.next(newPageData); // 仅推送当前页数据
  });
}

3. 页码未正确递增 #

如果“加载更多”时没有正确递增页码，比如每次都请求第1页，新请求回来的数据和之前的第一页完全重复，推入数组自然会出现重复项。

解决办法：
在组件中维护当前页码变量，点击时先递增再请求：

currentPage = 1;

onLoadMore() {
  this.currentPage++;
  this.apiService.loadMore(this.currentPage);
}

4. 组件错误追加全量数据 #

如果服务维护的是全量合并数据（每次新页数据加入后推全量），但组件却把全量数据再次推入questions数组，会导致重复。

解决办法：
此时组件应直接用全量数据覆盖数组，而非追加：

this.apiService.apiBehavior$
  .pipe(takeUntil(this.destroy$))
  .subscribe(fullData => {
    this.questions = fullData; // 直接覆盖数组
  });

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