在HarmonyOS NEXT中 @State修饰的数组内部的值变化了，刷新UI的方法？

Question

在HarmonyOS NEXT中 @State修饰的数组内部的值变化了，刷新UI的方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

要改变数组中对象的值需要用 @Observed和@ObjectLink，装饰器说明：对象数组是一种常用的数据结构。以下示例展示了数组对象的用法，示例：

@Component 
struct ViewA { 
  // 子组件ViewA的@ObjectLink的类型是ClassA 
  @ObjectLink a: ClassA; 
  label: string = 'ViewA1'; 
  build() { 
    Row() { 
      Button(`ViewA [${this.label}] this.a.c = ${this.a.c} +1`) 
        .onClick(() => { 
          this.a.c += 1; 
        }) 
    } 
  } 
} 
@Entry 
@Component 
struct ViewB { 
  // ViewB中有@State装饰的ClassA[] 
  @State arrA: ClassA[] = [new ClassA(0), new ClassA(0)]; 
  build() { 
    Column() { 
      ForEach(this.arrA, 
        (item: ClassA) => { 
          ViewA({ label: `#${item.id}`, a: item }) 
        }, 
        (item: ClassA): string => item.id.toString() 
      ) 
      // 使用@State装饰的数组的数组项初始化@ObjectLink，其中数组项是被@Observed装饰的ClassA的实例 
      ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] }) 
      ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] }) 
      Button(`ViewB: reset array`) 
        .onClick(() => { 
          this.arrA = [new ClassA(0), new ClassA(0)]; 
        }) 
      Button(`ViewB: push`) 
        .onClick(() => { 
          this.arrA.push(new ClassA(0)) 
        }) 
      Button(`ViewB: shift`) 
        .onClick(() => { 
          this.arrA.shift() 
        }) 
      Button(`ViewB: chg item property in middle`) 
        .onClick(() => { 
          this.arrA[Math.floor(this.arrA.length / 2)].c = 10; 
        }) 
      Button(`ViewB: chg item property in middle`) 
        .onClick(() => { 
          this.arrA[Math.floor(this.arrA.length / 2)] = new ClassA(11); 
        }) 
    } 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。