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

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

实现效果

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

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

适配的版本信息

IDE版本:4.0.1.501

DK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 15:50:18
相关问题
ForEach循环渲染过程是什么样
834浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
723浏览 • 1回复 待解决
快速预览通过网络数据渲染页面
315浏览 • 1回复 待解决