鸿蒙OS开发ForEach循环渲染

摘要

在ForEach循环渲染过程中，如果修改列表项中的数据，但是UI页面不会刷新。在最近开发公司app时遇到了这个问题，经过查看官方文档找到了解决方式

官方地址：数据变化不刷新

一、具体解决方案

思路：通过父子组件传值的方式，把需要循环显示的UI页面封装成子组件，父组件首先定义一个修饰器@Observed装饰的类别，子组件通过@ObjectLink装饰器的变量接收参数即可。

示例：

父组件

@Observed
class ChildCommonList {childEntity: FlowUpFileForm[] = []constructor(childEntity: FlowUpFileForm[]) {this.childEntity = childEntity;}
}

UI页面加载子组件

...@State fileList: FlowUpFileForm[] = [];
@State childCommon: ChildCommonList = new ChildCommonList(this.fileList);...build() {...ChildFileComEntry({ childCom: this.childCommon })...
}

子组件

@Component
struct ChildFileComEntry {@ObjectLink childCom: ChildCommonList;build() {ForEach(this.childCom.childEntity, () => {....})}}

经过上面的业务拆分，即可解决使用ForEach渲染页面修改数据不刷新的问题