HarmonyOS鸿蒙Next中LazyForEach列表刷新后数据错乱？IDataSource的key管理和DataChangeListener踩坑

尊敬的开发者，您好，
本地使用DevEco Studio 6.1.1 Release和API 23设备未复现您的问题，对于问题1、2建议开发者排查下键值生成函数生成的键值是否唯一，获取数据和删除数据后是否通过onDataAdd或者onDataDelete通知组件数据有变动，问题3建议通过替换新数组的方式实现数据的刷新，开发者可以参考下以下示例，或者为了进一步分析您的问题请提供下您的设备版本信息和可复现问题的demo，感谢您的理解与支持。
本地demo：

export class BasicDataSource<T> implements IDataSource {
  private listeners: DataChangeListener[] = [];
  protected dataArray: T[] = [];

  // 获取数据总数
  totalCount(): number {
    return this.dataArray.length;
  }

  // 获取指定索引的数据
  getData(index: number): T {
    return this.dataArray[index];
  }

  // 注册数据变化监听器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  // 注销数据变化监听器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // 通知数据重新加载
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    });
  }

  // 通知数据添加
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    });
  }

  // 通知数据删除
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
      listener.onDataReloaded();
    });
  }

  // 通知数据变化
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    });
  }
}

export class PageDataSource<T> extends BasicDataSource<T> {
  // 追加单条数据
  pushData(data: T): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  // 批量追加数据
  pushDataList(dataList: T[]): void {
    const startIndex = this.dataArray.length;
    this.dataArray.push(...dataList);
    for (let i = 0; i < dataList.length; i++) {
      this.notifyDataAdd(startIndex + i);
    }
  }

  // 清空并重新设置数据
  clearAndSetData(dataList: T[]): void {
    this.dataArray = [...dataList];
    this.notifyDataReload();
  }

  // 删除指定索引的数据
  deleteData(index: number): void {
    if (index >= 0 && index < this.dataArray.length) {
      this.dataArray.splice(index, 1);
      this.notifyDataDelete(index);
    }
  }

  // 清空数据
  clearData(): void {
    this.dataArray.splice(0, this.dataArray?.length)
  }

  // 根据条件查找索引
  findIndex(predicate: (item: T) => boolean): number {
    return this.dataArray.findIndex(predicate);
  }

  // 获取所有数据
  getAllData(): T[] {
    return this.dataArray;
  }
}

// 数据模型
interface ItemData {
  id: number;
  title: string;
  content: string;
}

@Entry
@Component
struct Index {
  // 数据源
  private dataSource: PageDataSource<ItemData> = new PageDataSource<ItemData>();
  private scroller: Scroller = new Scroller();
  // 分页状态
  @State currentPage: number = 1;
  @State pageSize: number = 20;
  @State isLoading: boolean = false;
  @State isRefreshing: boolean = false;
  @State hasMore: boolean = true;

  aboutToAppear(): void {
    this.loadFirstPage();
  }

  // 加载第一页数据
  async loadFirstPage(): Promise<void> {
    this.isLoading = true;
    try {
      const data = await this.fetchData(1);
      this.dataSource.clearAndSetData(data);
      this.currentPage = 1;
      this.hasMore = data.length >= this.pageSize;
    } catch (error) {
      console.error('加载失败:', error);
    } finally {
      this.isLoading = false;
    }
  }

  // 下拉刷新
  async onRefresh(): Promise<void> {
    if (this.isRefreshing) {
      return;
    }
    this.isRefreshing = true;
    try {
      const data = await this.fetchData(1);
      this.dataSource.clearAndSetData(data);
      this.currentPage = 1;
      this.hasMore = data.length >= this.pageSize;
    } catch (error) {
      console.error('刷新失败:', error);
    } finally {
      this.isRefreshing = false;
    }
  }

  // 上拉加载更多
  async onLoadMore(): Promise<void> {
    if (this.isLoading || !this.hasMore || this.isRefreshing) {
      return;
    }
    this.isLoading = true;
    try {
      const nextPage = this.currentPage + 1;
      const data = await this.fetchData(nextPage);
      if (data.length > 0) {
        this.dataSource.pushDataList(data);
        this.currentPage = nextPage;
        this.hasMore = data.length >= this.pageSize;
      } else {
        this.hasMore = false;
      }
    } catch (error) {
      console.error('加载更多失败:', error);
    } finally {
      this.isLoading = false;
    }
  }

  // 删除数据
  deleteItem(item: ItemData): void {
    const index = this.dataSource.findIndex((data) => data.id === item.id);
    if (index >= 0) {
      this.dataSource.deleteData(index);
    }
  }

  // 模拟数据获取请求
  async fetchData(page: number): Promise<ItemData[]> {
    return new Promise((resolve) => {
      setTimeout(() => {
        const data: ItemData[] = [];
        const startId = (page - 1) * this.pageSize + 1;
        const now = new Date();
        for (let i = 0; i < this.pageSize; i++) {
          data.push({
            id: startId + i,
            title: `标题 ${startId + i}`,
            content: `这是第 ${startId + i} 条数据的内容`
          });
        }
        if (page > 5) {
          resolve([]);
        } else {
          resolve(data);
        }
      }, 800);
    });
  }

  build() {
    Column() {
      // 标题栏
      Row() {
        Text('标题')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(56)
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#FFFFFF')

      // 下拉刷新区域
      Refresh({ refreshing: $$this.isRefreshing }) {
        List({ space: 12, scroller: this.scroller }) {
          LazyForEach(this.dataSource, (item: ItemData, index: number) => {
            ListItem() {
              this.ListItemBuilder(item, index)
            }
            .swipeAction({
              end: {
                builder: () => {
                  this.DeleteButtonBuilder(item)
                },
                actionAreaDistance: 80,
                onAction: () => {
                  this.getUIContext()?.animateTo({ duration: 1000 }, () => {
                    this.deleteItem(item);
                  });
                }
              },
              edgeEffect: SwipeEdgeEffect.Spring
            })
          }, (item: ItemData) => item.id.toString())
          // 底部加载状态
          ListItem() {
            this.FooterBuilder()
          }
        }
        .width('100%')
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        .edgeEffect(EdgeEffect.Spring)
        .cachedCount(5)
        .onScrollIndex((start: number, end: number) => {
          if (end >= this.dataSource.totalCount() - 3) {
            this.onLoadMore();
          }
        })
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false;
          this.onRefresh();
        }, 2000)
      })
      .refreshOffset(64)
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F5F5F5')
  }

  // 列表项构建（支持左滑删除）
  @Builder
  ListItemBuilder(item: ItemData, index: number) {
    ListItem() {
      Row() {
        Column() {
          Row() {
            Text(item.title)
              .fontSize(16)
              .fontWeight(FontWeight.Medium)
              .fontColor('#333333')
          }
          .width('100%')

          Text(item.content)
            .fontSize(14)
            .fontColor('#666666')
            .margin({ top: 8 })
            .maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
        }
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)
        .padding(16)
      }
      .width('100%')
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
      .margin({ left: 12, right: 12 })
    }
  }

  // 删除按钮构建
  @Builder
  DeleteButtonBuilder(item: ItemData) {
    Row() {
      // 删除按钮
      Column() {
        Text('删除')
          .fontSize(12)
          .fontColor('#FFFFFF')
          .margin({ top: 2 })
      }
      .width(80)
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor('#FF4D4F')
      .borderRadius({ topRight: 8, bottomRight: 8 })
      .onClick(() => {
        this.getUIContext()?.animateTo({ duration: 1000 }, () => {
          this.deleteItem(item);
        });
      })
    }
    .height('100%')
    .margin({ left: 12 })
  }

  // 底部状态构建
  @Builder
  FooterBuilder() {
    Row() {
      if (this.isLoading) {
        LoadingProgress()
          .width(24)
          .height(24)
          .color('#999999')
        Text('加载中...')
          .fontSize(14)
          .fontColor('#999999')
          .margin({ left: 8 })
      } else if (!this.hasMore) {
        Text('— 已经到底了 —')
          .fontSize(14)
          .fontColor('#CCCCCC')
      } else {
        Text('上拉加载更多')
          .fontSize(14)
          .fontColor('#999999')
      }
    }
    .width('100%')
    .height(60)
    .justifyContent(FlexAlign.Center)
  }
}

这类“数据没重复但 UI 重复、删除错位、刷新残影”的问题，优先看 key 和 DataChangeListener 通知是否严格对应数据变化。

建议检查：

1. getKey 不要用 index，要用后端 id 或业务唯一 id。
2. 分页追加只通知新增区间，不要追加后又整体 reload。
3. 删除中间项时先改数据源，再通知对应 index 的 delete，顺序不要反。
4. 下拉刷新如果是清空后重填，最好替换数据源实例或明确通知 reload，避免旧节点复用。
5. item 组件内部不要缓存 index，事件里用 id 找数据。

LazyForEach 的性能来自节点复用，key 不稳定时复用就会变成错位。先把 key 唯一且稳定这件事做对，后面的刷新问题会少很多。

这类现象优先检查 key 和通知时机。LazyForEach 会按 key 复用子组件；如果 key 用 index、随机值或不唯一，分页、删除、刷新后就容易出现重复、错位或旧 UI 残影。

建议这样处理：

1. LazyForEach 第三个参数使用业务唯一 id 作为 key，例如商品 id，不要使用 index。

2. IDataSource 的 totalCount() 和 getData(index) 必须始终读取同一份数组；先更新数组，再调用对应 DataChangeListener。

3. 追加第二页：从旧 length 开始逐条 onDataAdd(index)，或 API 12+ 使用 onDatasetChange 批量通知。

4. 删除中间项：先从数组删除，再 onDataDelete(index)；批量删除要从大 index 到小 index，避免索引位移。

5. 修改单项内容：替换对应数据后调用 onDataChange(index)。

6. 下拉全量刷新不要先清空通知再填充通知，建议一次替换新数组后调用 onDataReloaded()；如果新旧数据不是同一批，确保 key 随业务 id 改变，否则框架会复用旧 child。