HarmonyOS LazyForEach遇到下拉刷新,全部数据都替换,应该怎么处理

里面是一个List,List使用了LazyForEach渲染数据,数据也实现了LazyDataSource,现在的问题是下拉刷新的时候,想把数据全部都替换成最新的网络返回的数据,但是notifyDataReload当key不变的时候,view是没有重新创建的。那么之前的ListIItem就还是绑定的旧的数据,就不能操作那些数据的List单个去刷新了。难道需要下拉刷新的时候,每次LazyForEach都需要重新生成key么?

HarmonyOS
2024-12-20 16:17:20
648浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

关于这个问题,当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同,所以想更新已经加载完的数据时要重新生成key且key值不能与旧的key值相同。

参考demo:

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): string {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): string {
    return this.dataArray[index];
  }

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  public deleteData(index: number): void {
    this.dataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }

  public changeData(index: number): void {
    this.notifyDataChange(index);
  }

  public reloadData(): void {
    this.notifyDataReload();
  }

  public modifyAllData(): void {
    // newData为请求回来的数据
    // 如果是网络请求的话需要确定拿到数据并成功将数据更新后在调用reloadData()方法
    let newData: Array<string> = [];
    for (let i = 0; i <= 20; i++) {
      // 原始数据
      newData.push(`新的数据 ${i}`)
    }
    // this.clear()置空
    this.dataArray = [];
    this.dataArray.push(...newData)
  }
}

@Entry
@Component
struct MyComponent {
  @State isRefreshing: boolean = false
  @State counter: number = 0
  private moved: number[] = [];
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      // 原始数据
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
        Column(){
          List({ space: 3 }) {
            LazyForEach(this.data, (item: string, index: number) => {
              ListItem() {
                Row() {
                  Text(item).fontSize(50)
                    .onAppear(() => {
                      console.info("appear:" + item)
                    })
                }.margin({ left: 10, right: 10 })
              }
            }, (item: string) => item)
          }.cachedCount(5)
        }
      }
      .onRefreshing(() => {
        setTimeout(() => {
          this.data.modifyAllData();
          this.data.reloadData();
          this.isRefreshing = false
        }, 1000)
        console.log('onRefreshing test')
      })
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.
  • 136.
  • 137.
  • 138.
  • 139.
  • 140.
  • 141.
  • 142.
  • 143.
  • 144.
  • 145.
  • 146.
  • 147.
  • 148.
  • 149.
  • 150.
分享
微博
QQ
微信
回复
2024-12-20 17:44:18


相关问题
HarmonyOS LazyForEach数据刷新问题
691浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
1754浏览 • 1回复 待解决
HarmonyOS 下拉刷新的时候没有更新数据
1329浏览 • 1回复 待解决
HarmonyOS Web组件怎么添加下拉刷新
705浏览 • 1回复 待解决
HarmonyOS 下拉刷新如何实现
509浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
729浏览 • 1回复 待解决
HarmonyOS List怎么刷新数据
848浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
976浏览 • 1回复 待解决
HarmonyOS 首页下拉刷新异常
991浏览 • 1回复 待解决
HarmonyOS 组件的下拉刷新问题
1244浏览 • 1回复 待解决
HarmonyOS 下拉刷新,上拉加载功能
590浏览 • 1回复 待解决
HarmonyOS使用Refresh下拉刷新问题
1539浏览 • 1回复 待解决
HarmonyOS 下拉刷新,上拉加载示例
678浏览 • 1回复 待解决