Foreach循环渲染,数据源改变时的重复渲染

1. 前端获取到一个列表数据后,在前台渲染,使用时在前台操作,修改了数据,从而导致前台会重新依据数据再次渲染,前端表现为页面内容消失重建。

2. 现在要求改动数据源后,前端不重新渲染组件,只更新数据。

HarmonyOS
2024-05-26 11:56:53
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
rhlee

使用的核心API

1. 使用Foreach,但是需要结合@Observed和@ObjectLink装饰器使用

2. 参考资料:Foreach的使用

核心代码解释

数据源对象类

@Observed 
export default class stu { 
  name : string; 
  age : number; 
  id : string; 
  
  constructor(name:string,age:number,id:string) { 
    this.name = name; 
    this.age = age; 
    this.id = id; 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

Foreach循环渲染数据

import stu from '../common/bean/stu'; 
  
@Entry 
@Component 
struct fivePage { 
  @State simpleList: Array<stu> = [ 
    new stu('赵',10,'00001'), 
    new stu('钱',11,'00002'), 
    new stu('孙',12,'00003'), 
    new stu('李',13,'00004'), 
  ]; 
  
  build() { 
    Row() { 
      Column() { 
        ForEach(this.simpleList, (item : stu,index : number) => { 
          if (index % 2 === 0) { 
            ChildItem({student : item}) 
          } else { 
            ChildItemT({student : item}) 
          } 
        },(item : stu) => item.id)//这个key的定义需要具备唯一性,且不会发生改变 
      } 
    } 
  } 
} 
  
@Component 
struct ChildItem { 
  
  @ObjectLink student :stu; 
  
  build() { 
    Row() { 
      Column(){ 
        Text(this.student.id) 
      } 
      .width('30%') 
      Column(){ 
        Text(this.student.name) 
      } 
      .width('30%') 
      Column(){ 
        Text(this.student.age.toString()) 
      } 
      .width('40%') 
    } 
    .backgroundImage($r('app.media.startIcon')) 
    .onClick(()=>{ 
      this.student.age ++; 
    }) 
  } 
} 
  
@Component 
struct ChildItemT { 
  @ObjectLink student :stu; 
  
  build() { 
    Row() { 
      Column(){ 
        Text(this.student.id) 
      } 
      .width('30%') 
      Column(){ 
        Text(this.student.name) 
      } 
      .width('30%') 
      Column(){ 
        Text(this.student.age.toString()) 
      } 
      .width('40%') 
    } 
    .backgroundImage($r('app.media.icon')) 
    .onClick(()=>{ 
      this.student.age ++; 
    }) 
  } 
}
  • 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.

实现效果

错误版本:数据源发生改变后,组件重新渲染,表现为背景图片消失又出现

正确版本:表现为修改数据源数据后,前端只修改数据,没有重新渲染组件

适配的版本信息

IDE版本:4.0.1.501

DK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 15:50:18
相关问题
ForEach循环渲染过程是什么样
1684浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
1698浏览 • 1回复 待解决
HarmonyOS picker选择器数据源问题
815浏览 • 1回复 待解决