鸿蒙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渲染页面修改数据不刷新的问题