@State 修饰的变量值改变，界面不刷新？

Question

@State testState: Object = {
  "a": "aaaaaaa",
  "b": "bbbbbbb",
  "c": "ccccccc",
  "d": "ddddddd",
}
@Builder
buildTestItemView(data: string) {
  Text(data).fontColor(Color.Black).fontSize(14)
}

build() {
  Column() {
    this.buildTestItemView(this.testState["a"])
    this.buildTestItemView(this.testState["b"])
    this.buildTestItemView(this.testState["c"])
    this.buildTestItemView(this.testState["d"])
  }.onClick(() => {
    this.testState = {
      "a": "zzzzzzzz",
      "b": "yyyyyyyy",
      "c": "xxxxxxxx",
      "d": "wwwwwwww",
    }
  })

}

Answer 1

1.colum很难被点击到，因为被其上的text挡住了。

2.text的文本属性没有直接与@state 修饰的根变量绑定。@state的详细用法可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state-0000001774279614

示例代码：

@Entry
@Component
struct Page {
  @State testState: Object = {
    "a": "aaaaaaa",
    "b": "bbbbbbb",
    "c": "ccccccc",
    "d": "ddddddd",
  }
  @Builder
  buildTestItemView(name:string) {
    Column({space:10}){
      Text(this.testState[name])
        .fontColor(Color.Black)
        .fontSize(30)
        .height(50)
        .width('50%')
        .backgroundColor('#ffbde9b9')
        .onClick(() => {
          console.log('文本被点击',this.testState[name]);
        })
    }

  }

  build() {
    Column({space:10}) {
      this.buildTestItemView('a')
      this.buildTestItemView('b')
      this.buildTestItemView('c')
      this.buildTestItemView('d')

      Text(`${this.testState['a']}`)
        .fontColor(Color.Black)
        .fontSize(50)
        .height(70)
        .width('80%')
        .backgroundColor('#ffd4e2e2')
        .onClick(() => {
          console.log('文本被点击',Object['a'])
        })
    }
    .backgroundColor('#ff5c7bae')
    .width('100%')
    .height('100%')
    .onClick(() => {
      console.log('容器被点击');
      this.testState = {
        "a": "zzzzzzzz",
        "b": "yyyyyyyy",
        "c": "xxxxxxxx",
        "d": "wwwwwwww",
      }
    })

  }
}