HarmonyOS 鸿蒙Next LazyForEach 使用reloadData不生效界面没有刷新数据是旧的数据

HarmonyOS 鸿蒙Next LazyForEach 使用reloadData不生效界面没有刷新数据是旧的数据 代码如下。

点击Hello, Hello文字后面会加个’0’,

现在我想重新加载数据,reload却不生效

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Lazy2 {
  @State message: string = 'Hello World';
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 5; i++) {
      this.data.pushData(new StringData(`Hello ${i}`, $r('app.media.app_icon')));
    }
  }

  reloadData() {
    const dataList: StringData[] = []
    for (let i = 0; i <= 5; i++) {
      dataList.push(new StringData(`Hello ${i}`, $r('app.media.app_icon')));
    }
    this.data.reloadData(dataList)
  }

  reloadDataForce() {
    const dataList: StringData[] = []
    for (let i = 0; i <= 5; i++) {
      dataList.push(new StringData(`Hello ${i}`, $r('app.media.app_icon')));
    }
    this.data.clear()
    promptAction.showToast({
      message: JSON.stringify(dataList.map(item => item.message + " "))
    })
    setTimeout(() => {
      this.data.reloadData(dataList)
    }, 1000)
  }

  build() {
    Column() {

      Button('点击reload 重新加载').onClick(() => {
        this.reloadData()
      })

      Button('点击reload clear + settimeout 强制刷新').onClick(() => {
        this.reloadDataForce()
      })

      List({ space: 3 }) {
        ListItem() {
          Column{}.width('100%').height(100).backgroundColor(Color.Red)
        }
        LazyForEach(this.data, (item: StringData, index: number) {
          ListItem() {
            ChildComponent({data: item})
          }
          .onClick(() => {
            item.message += '0';
          })
        }, (item: StringData, index: number) => index.toString())
      }.cachedCount(5).width('100%')
      .height('100%')

    }
    .height('100%')
    .width('100%')
    .backgroundColor('gray')
  }
}

@Observed
class StringData {
  message: string = '';
  imgSrc: ResourceStr = '';
   constructor(message: string, imgSrc: ResourceStr) {
     this.message = message;
     this.imgSrc = imgSrc;
   }
}
@Component
struct ChildComponent {
  @ObjectLink data: StringData
  build() {
    Column() {
      Text(this.data.message).fontSize(20).width('100%')
      Image(this.data.imgSrc)
        .width(60)
        .height(50)
    }.margin({ left: 10, right: 10 })
  }
}

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

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): StringData {
    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);
    }
  }
  public clear() {
    this.originDataArray.splice(0, this.totalCount())
    this.notifyDataReload()
  }

  public reloadData(data: StringData[]) {
    this.originDataArray = data
    this.notifyDataReload()
  }

  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);
    })
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    })
  }
}


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

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

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

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

更多关于HarmonyOS 鸿蒙Next LazyForEach 使用reloadData不生效界面没有刷新数据是旧的数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这里写错了, 应该这样:  (改了之后 一样没用)

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

更多关于HarmonyOS 鸿蒙Next LazyForEach 使用reloadData不生效界面没有刷新数据是旧的数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,LazyForEach组件用于高效渲染列表数据,reloadData方法用于强制刷新数据。如果reloadData不生效,界面未刷新且显示旧数据,可能的原因包括:

  1. 数据源未更新:LazyForEach依赖数据源的变化来触发界面刷新。如果数据源未更新,reloadData无法生效。确保数据源在调用reloadData前已更新。

  2. 状态管理问题:LazyForEach依赖状态管理机制来检测数据变化。如果状态未正确更新,界面不会刷新。检查是否使用了@State@Observed等状态管理装饰器,并确保状态更新正确。

  3. LazyForEachkeyGenerator未变化:LazyForEach通过keyGenerator识别数据项。如果keyGenerator未随数据变化而更新,reloadData可能不会触发刷新。确保keyGenerator能正确反映数据变化。

  4. UI线程未更新:鸿蒙的UI更新需在主线程进行。如果reloadData在非主线程调用,界面可能不会刷新。确保在主线程调用reloadData

  5. 组件生命周期问题:LazyForEach所在组件的生命周期可能影响刷新效果。例如,组件未挂载或已卸载时,reloadData不会生效。确保组件处于活跃状态。

  6. LazyForEach本身的限制:LazyForEach是懒加载组件,某些情况下可能不会立即刷新。可尝试强制刷新整个组件或使用ForEach替代。

总结:reloadData不生效通常与数据源、状态管理、keyGenerator或UI线程有关。检查这些方面以确保数据更新能正确触发界面刷新。

回到顶部