HarmonyOS 鸿蒙Next 异步获取数据,列表无法更新视图

发布于 1周前 作者 yibo5220 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 异步获取数据,列表无法更新视图

class Item { label: string = ‘’; }  /** *  实现IDataSource接口的对象,用于瀑布流组件加载数据 */ export class WaterFlowDataSource implements IDataSource { private dataArray: Item[] = [] private listeners: DataChangeListener[] = []  constructor(data: Item[] = []) { this.dataArray = data }  // 获取索引对应的数据 public getData(index: number): Item { return this.dataArray[index] }   // 获取数据总数 public totalCount(): number { return this.dataArray.length }  // 注册改变数据的控制器 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) } } }  @Entry @Component struct MainPage { @State WaterfallObj: Record<string, Item[]> = {};  aboutToAppear(): void { setTimeout(() => { this.WaterfallObj[‘recommend’] = [{label: ‘1’},{label: ‘2’},{label: ‘3’}]; }, 2000) }  build() { Row() { Column() { Waterfall({data: this.WaterfallObj[‘recommend’]}) } .width(‘100%’) } .height(‘100%’) } }  @Component struct Waterfall { @Prop data: Item[] = []; build() { WaterFlow() { LazyForEach(new WaterFlowDataSource(this.data), (item: Item) => { FlowItem() { Column() { Text(item.label) .width(‘100%’) .height(50) } } .width(‘100%’) }, (item: Item) => JSON.stringify(item)) } .columnsTemplate(“1fr 1fr”) .columnsGap(10) .rowsGap(5) .width(‘100%’) .height(‘100%’) } }

2 回复
@Entry
@Component
struct MainPage {
  @State WaterfallObj: Record<string, Item[]> = {};
  @State waterFlowData: WaterFlowDataSource = new WaterFlowDataSource()
  aboutToAppear(): void {
    setTimeout(() => {
      this.WaterfallObj['recommend'] = [{ label: '1' }, { label: '2' }, { label: '3' }, { label: '4' }];
      this.WaterfallObj['recommend'].forEach((item: Item)=>{
        this.waterFlowData.pushData(item)
      })
    }, 2000)
  }
  build() {
    Row() {
      Column() {
        Waterfall({ waterFlowData: this.waterFlowData })
      }
      .width('100%')
    }
    .height('100%')
  }
}
@Component
struct Waterfall {
  @ObjectLink waterFlowData: WaterFlowDataSource;
  build() {
    WaterFlow() {
      LazyForEach(this.waterFlowData, (item: Item) => {
        FlowItem() {
          Column() {
            Text(item.label)
              .height(50)
          }
        }
        .width('100%')
      }, (item: Item) => JSON.stringify(item))
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(5)
    .width('100%')
    .height('100%')
  }
}
@Observed
class Item {
  label: string = '';
}
/**
 * 实现IDataSource接口的对象,用于瀑布流组件加载数据
 */
@Observed
export class WaterFlowDataSource implements IDataSource {
  private dataArray: Item[] = []
  private listeners: DataChangeListener[] = []
  constructor(data: Item[] = []) {
    this.dataArray = data
  }
  // 获取索引对应的数据
  public getData(index: number): Item {
    return this.dataArray[index]
  }
  // 获取数据总数
  public totalCount(): number {
    return this.dataArray.length
  }
  // 注册改变数据的控制器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }
  public pushData(data: Item): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
  // 注销改变数据的控制器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener)
    if (pos >= 0) {
      this.listeners.splice(pos, 1)
    }
  }
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }
}

在HarmonyOS鸿蒙Next系统中,若遇到异步获取数据后列表无法更新视图的问题,通常是由于数据绑定或UI刷新机制未正确处理。以下是一些可能的解决方向:

  1. 确保数据绑定正确:检查数据源与UI列表组件的绑定是否建立正确,确保数据源更新能触发UI刷新。

  2. 使用正确的异步处理机制:采用@AbilityMain注解的页面或组件中,确保使用@EnvEntry@State等注解管理数据状态,并通过@ObservedObject@ObservedResults观察数据变化。

  3. 调用UI刷新方法:在数据更新后,显式调用UI刷新方法,如this.markNeedsBuild()this.$forceUpdate()(根据具体框架可能有所不同)。

  4. 检查数据更新逻辑:确保异步任务(如网络请求)完成后,数据确实被更新,并且没有在其他地方被意外覆盖或重置。

  5. 调试和日志:增加日志输出,监控数据更新和UI渲染的过程,帮助定位问题。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。此地址提供进一步的技术支持和解决方案。

回到顶部