使用LazyForEach渲染语法渲染组件，UI不刷新。

使用LazyForEach渲染语法渲染组件，组件仅显示一个或者空白

HarmonyOS

day_night

2024-06-11 20:58:30

浏览

回答 1

待解决

回答 1

按赞同

按时间

wjmfzsz

Step 1 确保在代码中使用了LazyForEach的DataChangeListener对象的更新方法来触发页面更新。

Step 2 确保数据变化前后LazyForEach生成的子组件键值发生了变化。

异常代码示例

class MyDataSource implements IDataSource { 
 private listener: DataChangeListener 
 // 初始化数据列表 
 private dataArray: Array<{ 
   id: number, 
   val: String 
 }> = [{ id: 0, val: '/path/image0.png' }, { id: 1, val: '/path/image1.png' }, { 
   id: 2, 
   val: '/path/image2.png' 
 }] 
  
 public totalCount(): number { 
   return this.dataArray.length 
 } 
  
 public getData(index: number): any { 
   return this.dataArray[index] 
 } 
  
 registerDataChangeListener(listener: DataChangeListener): void { 
   this.listener = listener 
 } 
  
 unregisterDataChangeListener(listener: DataChangeListener): void { 
   this.listener = undefined 
 } 
  
 public changeSecondData(data: string): void { 
   this.dataArray[1].val = data 
   // 已经正常使用了onDataChanged函数通知了更新。 
   this.listener.onDataChange(1) 
 } 
} 
  
@Entry 
@Component 
struct MyComponent { 
 private data: MyDataSource = new MyDataSource() 
  
 build() { 
   List({ space: 3 }) { 
     ListItem() { 
       Text('change second value') 
     }.onClick(() => { 
       this.data.changeSecondData('new data') 
     }) 
  
     LazyForEach(this.data, (item) => { 
       ListItem() { 
         Text(item.val).fontSize(20).margin({ left: 10 }) 
       }.margin({ left: 10, right: 10 }) 
       // changeSecondData()函数中没有修改id的值，导致下面的键值在变化前后未发生变化。 
       // 可以修改键值生成器函数：item => JSON.stringify(item)或者在changeSecondData()函数中同步修改id的值。 
     }, item => item.id.toString()) 
   } 
 } 
}