HarmonyOS 使用了Observed界面仍然不刷新？

Question

@Entry
@Component
struct Index {

  @State a : A = new A()

  build() {
    Column() {
      Child({a:this.a}).width('100%').height('100%')
    }
  }
}

@Component
struct Child{
  @ObjectLink a:A
  build() {
    Text(this.a.b.name).width('100%').height('100%').onClick(()=>{
      this.a.b.name = "222222"
    })
  }
}

@Observed
class A {
  b:B = new B()
}

@Observed
class B {
  name:string = '11111'

  constructor(name: string = "11111") {
    this.name = name;
  }
}

上面的代码，点击后，为什么界面不会刷新

Answer 1

无法观察嵌套在属性中的属性，即this.a.b.name（属性c是内嵌在b中的对象classC的属性）。

为了观察到嵌套于内部的ClassC的属性，需要做如下改变：

1、构造一个子组件，用于单独渲染ClassB的实例。 该子组件可以使用@ObjectLink b : ClassB。通常会使用@ObjectLink，除非子组件需要对其ClassC对象进行本地修改。

2、嵌套的ClassC必须用@Observed装饰。当在ClassA中创建ClassB对象时，它将被包装在ES6代理中，当ClassB属性更改时（this.b.name = “222222”），该代码将修改通知到@ObjectLink变量。

具体内容可参考常见问题：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5\#在子组件中给objectlink装饰的变量赋值

以下是更改demo：

@Entry
@Component
struct Index {
  @State a: A = new A()
  build() {
    Column() {
      Button("Change a.b.name")
        .onClick(() => {
          this.a.b.name = '父组件改变';
        })

      Child({b:this.a.b}).width('100%').height('100%')

    }
  }
}

@Component
struct Child{
  @ObjectLink b:B
  build() {
    Text(this.b.name).width('20%').height('20%').onClick(()=>{
      this.b.name = "222222"
    }).backgroundColor(Color.Red)
  }
}

@Observed
class A {
  b:B = new B()
}
@Observed
class B {
  name: string = '111111'
  constructor(name: string = "11111") {
    this.name = name;
  }
}