HarmonyOS 关于数组包裹对象中更新组件问题

以下代码中Info对象中real_name字段期望点击griditem的时候更新reanl_name信息这个如何实现啊，目前是数组更新了，但是real_name没及时更新。

import { ObservedArray } from '@ohos/common'
@Preview
@Component
export struct GridTest {
  @State beanList: ObservedArray<Info> = []
  aboutToAppear(): void {
    this.beanList.push(new Info("1"))
    this.beanList.push(new Info("2"))
    this.beanList.push(new Info("3"))
    this.beanList.push(new Info("4"))
    this.beanList.push(new Info("5"))
    this.beanList.push(new Info("6"))
    this.beanList.push(new Info("7"))
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.beanList, (item: Info, index) => {
          GridItem() {
            Column() {
              Text(item.real_name)
                .fontColor($r('app.color.scaffold_fg_dark_2'))
                .fontSize(12)
                .padding({ top: 5, bottom: 2 })
                .maxLines(1)
                .textAlign(TextAlign.Center)
                .visibility(Visibility.Visible)
            }
          }.borderRadius(8)
          .size({width:80,height:80})
          .backgroundColor(Color.Red)
          .borderWidth(0).onClick(() => {
            this.beanList[index].real_name = index + "SS"
            console.log("-----onClick-grid---" + this.beanList[index].real_name + ",," + item.real_name)
          })
        }, (item: Info) => JSON.stringify(item))
      }
      .rowsGap(10)
      .columnsGap(16)
      .padding({
        bottom: 12,
        top: 10
      })
    }.width("100%").backgroundColor($r('app.color.color_ffffff'))
  }
}
@Observed
export class Info {
  constructor(real_name: string) {
    this.real_name = real_name
  }
  real_name?: string = '';
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

HarmonyOS

FengTianYa

2024-12-23 16:28:33

浏览

回答 1

按赞同

按时间

aquaa

请参考下方代码：

@Observed
export class ObservedArray<T> extends Array<T> {
  constructor(args?: T[]) {
    if (args instanceof Array) {
      super(...args);
    } else {
      super();
    }
  }
}

@Observed
export class Info {
  constructor(real_name: string) {
    this.real_name = real_name
  }
  real_name?: string = '';
}

@Entry
@Component
export struct GridTest {
  @State beanList: ObservedArray<Info> = []
  aboutToAppear(): void {
    this.beanList.push(new Info("1"))
    this.beanList.push(new Info("2"))
    this.beanList.push(new Info("3"))
    this.beanList.push(new Info("4"))
    this.beanList.push(new Info("5"))
    this.beanList.push(new Info("6"))
    this.beanList.push(new Info("7"))
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.beanList, (item: Info, index) => {
          GridItem() {
            ItemInfo({itemInfo:item,itemIndex:index})
          }.borderRadius(8)
          .size({width:80,height:80})
          .backgroundColor(Color.Red)
        }, (item: Info) => JSON.stringify(item))
      }
      .rowsGap(10)
      .columnsGap(16)
      .padding({
        bottom: 12,
        top: 10
      })
      Button('click').onClick(()=>{
        console.log("-----onClick-grid---" + JSON.stringify(this.beanList))
      })
    }.width("100%").backgroundColor(Color.White)
  }
}

@Component
struct ItemInfo {
  @ObjectLink itemInfo: Info;
  @State itemIndex: number=0;
  handleLiked() {
    this.itemInfo.real_name = this.itemIndex + 'Ss';
  }
  build() {
    Row() {
      Text(this.itemInfo.real_name)
    }.width('100%')
    .height('100%')
    .onClick(() => this.handleLiked())
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

每个属性都要实例化，通过json解析，ArkUI无法监听对象中数组属性的push变化，json解析的为非class对象，class内的属性变化不能被观察到。

2024-12-23 18:47:59

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 关于数组包裹对象中更新组件问题

订阅鸿蒙技术特刊，精选内容抢先看