HarmonyOS鸿蒙Next中循环渲染对象列表，页面无法观察到对象内部的属性变化

楼主您好，您这边UI未更新原因是**@ObjectLink修饰的变量，没有通过new的方式实例化，可以看一下下文中的【解决方案】**，已经根据问题描述中的代码完成修改：

【背景知识】

[@Observed和@ObjectLink装饰器](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)：该装饰器可以监测多层嵌套的情况，比如二维数组，或者数组项class中class属性变化，或者class的属性是class中内部class的属性变化。

ForEach循环渲染：在ForEach组件进行非首次渲染时，它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在，则会创建一个新的组件；如果键值存在，则不会创建新的组件，而是直接渲染该键值所对应的组件。详情参考：组件创建规则。

【问题定位】

List组件内UI不刷新的问题可能有以下几种情况：

1. @State无法观察到对象数组中对象属性的变化的这样也会导致UI无法刷新，需要使用@Observed和@ObjectLink进行修饰。
2. @ObjectLink修饰的变量，没有通过new的方式实例化。
3. 根据知识背景中的组件创建规则，数据源修改后，如果监测方法正确，ForEach中键值对的值也会跟着修改，但是如果ForEach内keyGenerator（代表键值对中的键）没有更新也会导致无法刷新UI，ForEach参数介绍详见：ForEach参数介绍。
4. @ObjectLink修饰的变量含有嵌套类对象，组件改变嵌套对象的属性，无法刷新UI。因为@ObjectLink仅能观察其代理的属性，无法观察到代理属性的嵌套对象属性。参考：复杂嵌套对象属性更改失效。

【解决方案】

楼主目前UI未触发更新的场景属于第二种现象：@ObjectLink修饰的变量，没有通过new的方式实例化。 建议通过new实例化后再处理，我这边根据您的代码进行修改，能够正常更新点赞，您可以看下：

[@Observed](/user/Observed)
export class PostInfo {
  id: number;
  postText: string;
  @Track likeCount: number;
  // 有初始值，才能建立观察通道
  @Track isLike: boolean = false;


  constructor(id: number, postText: string, isLike: boolean, likeCount: number) {
    this.id = id;
    this.postText = postText;
    this.isLike = isLike;
    this.likeCount = likeCount;
  }
}
// 在设置页面中使用
@Entry
@Component
struct shareTestComponent {
  [@State](/user/State) postInfoList: PostInfo[] = []
  [@State](/user/State) isLoadingMore: boolean = true;
  scroller: Scroller = new Scroller()
  page: number = 1
  total: number = 0

  async getPostInfoPage() {
    this.postInfoList = [new PostInfo(1122, '测试点赞', false, 0), new PostInfo(1123, '测试点赞2', false, 0)]
  }

  aboutToAppear(): void {
    this.getPostInfoPage()
  }

  build() {
    Column() {
      List({ scroller: this.scroller }) {
        ForEach(this.postInfoList, (postInfo: PostInfo) => {
          ListItem() {
            PostItem({ post: postInfo })
          }
        }, (postInfo: PostInfo) => postInfo.id.toString())
      }
    }
  }
}

@Component
struct PostItem {
  [@ObjectLink](/user/ObjectLink) post: PostInfo;

  build() {
    Column({ space: 10 }) {

      Row() {
        Text(this.post.likeCount.toString())
          .fontSize(12)
          .fontWeight(FontWeight.Medium)
          .fontColor(this.post.isLike ? '#3ECBA1' : '#000000')
        Column() {
          Image(this.post.isLike ?
            $r('app.media.video_create_gif_preview3') : $r('app.media.video_create_gif_preview5'))
            .width(26)
            .height(26)
            .onClick(async () => {
              if (this.post.isLike) {
                this.post.isLike = false;
                this.post.likeCount--
                // 取消点赞
                this.getUIContext().getPromptAction().showToast({ message: '取消点赞成功' })
              } else {
                // 点赞
                console.log('点赞')

                this.post.isLike = true
                this.post.likeCount++
                this.getUIContext().getPromptAction().showToast({ message: '点赞成功' })

              }
            })
        }.width(50)
      }.width('100%')
      .alignItems(VerticalAlign.Bottom)
    }
    .padding(10)
    .width('90%')
    .margin({ top: 10 })
    .borderRadius(10)
    .shadow({ radius: 20 })
  }
}

其它UI不刷新的问题具体修改方式如下，也可以一并参考：

【分析结论】

1. 建议将ForEach的最后一个参数缺省，系统会默认设置键值中的键。
2. 使用@Observed和@ObjectLink进行修饰。
3. @ObjectLink修饰的变量通过new的方式实例化。
4. @ObjectLink修饰的变量含有嵌套类对象，需要给子组件单独传递该嵌套类对象，子组件中new一个用@ObjectLink修饰的嵌套类对象来接收。

【修改建议】 场景一：@Observed结合@ObjectLink观察嵌套类对象属性变化。 可以参考如下实现方式：

[@Observed](/user/Observed)
class TestList {
  text: string;
  isFlag: boolean;

  constructor(text: string, isFlag: boolean) {
    this.text = text;
    this.isFlag = isFlag;
  }
}

@Entry
@Component
struct DisplayTest {
  [@State](/user/State) ListArray: Array<TestList> = [new TestList('第一条数据：', false), new TestList('第二条数据：', true)]

  build() {
    Column({ space: 20 }) {
      Text('测试：')
        .width('100%')
      Button('点击修改第一条数据的值！')
        .type(ButtonType.Capsule)
        .onClick(() => {
          this.ListArray[0].isFlag = !this.ListArray[0].isFlag
        })
        .width('50%')
      Button('点击新增加数据！')
        .type(ButtonType.Capsule)
        .onClick(() => {
          this.ListArray.push(new TestList('新增：', false))
        })
        .width('50%')
      Scroll() {
        Column() {
          ForEach(this.ListArray, (item: TestList) => {
            Test001({ test: item })
              .height(72)
          })
        }
      }
      .align(Alignment.TopStart)
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct Test001 {
  [@ObjectLink](/user/ObjectLink) test: TestList

  build() {
    Row() {
      Text(this.test.text + this.test.isFlag)
    }
    .justifyContent(FlexAlign.Center)
    .height(100)
    .width('100%')
  }
}

场景二：@ObjectLink修饰的变量含有嵌套类对象，将该嵌套类对象单独传递给子组件。 可以参考如下实现方式：

@Entry
@Component
struct Index {
  [@State](/user/State) listArray: Person[] = []

  aboutToAppear(): void {
    this.initData()
  }

  initData() {
    const p1 = new Person()
    p1.name = "p1"
    p1.id = "id1"

    const c1 = new Child()
    c1.name = "c1"
    c1.id = "cid1"

    const goods = new GoodsModel()
    goods.goodName = "大米"
    c1.goods = goods

    const c2 = new Child()
    c2.name = "c2"
    c2.id = "cid2"

    p1.children = [c1, c2]
    this.listArray = [p1]
  }

  build() {
    Column() {
      Button("更改数据")
        .fontSize(20)
        .margin({
          top: 50, bottom: 50
        })
        .onClick(() => {
          this.listArray.forEach((person: Person) => {
            person.children?.forEach((child: Child) => {
              if (child.id == "cid1") {
                if (!!child.goods) {
                  child.goods.goodName = "大米_002" // 修改嵌套类对象属性
                }
              }
            })
          })
        })
      this.contentList()

    }
    .justifyContent(FlexAlign.Start)
    .width("100%")
    .height("100%")
  }

  @Builder
  contentList() {
    List() {
      ForEach(this.listArray, (person: Person) => {
        ListItem() {
          List() {
            ForEach(person.children, (child: Child) => {
              ListItem() {
                ChildrenItemCard({
                  child: child,
                  goods: child.goods
                })
              }
            })
          }
        }
      }, (person: Person) => person.id)
    }
  }
}

[@Observed](/user/Observed)
export class Person {
  name?: string
  age: number = 0
  id: string = ""
  children?: Child[]
}

[@Observed](/user/Observed)
export class Child {
  name?: string
  age: number = 0
  id: string = ""
  goods?: GoodsModel
}

[@Observed](/user/Observed)
export class GoodsModel {
  goodName?: string
}

@Component
export struct ChildrenItemCard {
  [@ObjectLink](/user/ObjectLink) @Watch("updateModel") child: Child
  [@ObjectLink](/user/ObjectLink) goods: GoodsModel // 将嵌套类对象单独传递给子组件，不然无法观测到其属性变化

  updateModel() {
    console.debug("xx")
  }

  build() {
    Column() {
      Row() {
        Text("child.name:")
        Text(this.child.name ?? "")
      }
      .justifyContent(FlexAlign.Center)
      .width("90%")
      .height(30)

      Row() {
        Text("child.good.goodName:")
        Text(this.goods?.goodName ?? "")
      }
      .justifyContent(FlexAlign.Center)
      .width("90%")
      .height(30)
    }
  }
}