HarmonyOS鸿蒙Next中使用@ObservedV2装饰器和@Trace装饰器，点击后页面不会刷新

HarmonyOS鸿蒙Next中使用@ObservedV2装饰器和@Trace装饰器，点击后页面不会刷新 代码如下：

[@ObservedV2](/user/ObservedV2)
export class HumanInfo {
  [@Trace](/user/Trace) name?: string;
  [@Trace](/user/Trace) age?: number;
}

@Builder
export function PageIndexBuilder(name: string, param: Object) {
  IndexPage()
}


@Entry
@ComponentV2
struct IndexPage {
  human: HumanInfo = {}
  pageStack: NavPathStack = new NavPathStack();

  aboutToAppear(): void {
    this.human.name = "123"
    this.human.age = 11
  }

  @Builder
  createHumanItem(name: string | undefined, age: number | undefined, onChange: () => void) {
    Row() {
      Text(`姓名：${name}`).fontColor(Color.White)
      Text(`年龄：${age}`).fontColor(Color.White)
    }.justifyContent(FlexAlign.SpaceBetween)
    .alignItems(VerticalAlign.Center)
    .height(50)
    .width('100%')
    .backgroundColor(Color.Orange)
    .onClick(onChange)
  }

  build() {
    Navigation(this.pageStack) {
      Column() {
        Text("bug1：点击橙色区域修改姓名和年龄，但是不会更新界面")
        this.createHumanItem(this.human.name, this.human.age, () => {
          this.human.name = "456"
          if (this.human.age) {
            this.human.age += 1
          } else {
            this.human.age = 20
          }
          console.log(`修改后的值:${this.human.name}---${this.human.age}`)
        })
      }
    }.title("首页")
  }
}

请问各位大佬如何修改？


更多关于HarmonyOS鸿蒙Next中使用@ObservedV2装饰器和@Trace装饰器，点击后页面不会刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者您好，修改代码后可以正常刷新页面，代码如下：

@ObservedV2

export class HumanInfo {

  @Trace name?: string;

  @Trace age?: number;

}

@Builder

export function PageIndexBuilder(name: string, param: Object) {

  IndexPage()

}

@Entry

@ComponentV2

struct IndexPage {

  human: HumanInfo = new HumanInfo()

  pageStack: NavPathStack = new NavPathStack();

  aboutToAppear(): void {

    this.human.name = "123"

    this.human.age = 11

  }

  @Builder

  createHumanItem( onChange: () => void) {

    Row() {

      Text(`姓名：${this.human.name}`).fontColor(Color.White)

      Text(`年龄：${this.human.age}`).fontColor(Color.White)

    }.justifyContent(FlexAlign.SpaceBetween)

    .alignItems(VerticalAlign.Center)

    .height(50)

    .width('100%')

    .backgroundColor(Color.Orange)

    .onClick(onChange)

  }

  build() {

    Navigation(this.pageStack) {

      Column() {

        Text("bug1：点击橙色区域修改姓名和年龄，但是不会更新界面")

        this.createHumanItem(() => {

          this.human.name = "456"

          if (this.human.age) {

            this.human.age += 1

          } else {

            this.human.age = 20

          }

          console.log(`修改后的值:${this.human.name}---${this.human.age}`)

        })

      }

    }.title("首页")

  }

}

更多关于HarmonyOS鸿蒙Next中使用@ObservedV2装饰器和@Trace装饰器，点击后页面不会刷新的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题很常见，尤其是在列表数据对象的赋值的之后，直接使用后端数据（会遇到问题，如果存在修改的情况下，不修改的话直接赋值也可以的）

human: HumanInfo = {}  // 这里不对，需要new来创建对象才行

在HarmonyOS Next中，@ObservedV2装饰器用于标记可观察类，@Trace装饰器用于标记可观察属性。当使用这两个装饰器时，若点击后页面未刷新，通常是因为状态变更未触发UI更新。检查是否在ArkUI声明式框架中正确使用了状态管理，确保@Trace装饰的属性在组件中绑定，且变更操作在UI线程执行。此外，验证装饰器导入路径是否正确，避免使用非响应式方法直接修改属性。

在您的代码中，@ObservedV2 装饰的类 HumanInfo 需要正确初始化，并且需要确保属性被 [@Trace](/user/Trace) 装饰。问题可能出现在以下方面：

  1. 类初始化问题：human: HumanInfo = {} 会导致对象未正确实例化，应改为 human: HumanInfo = new HumanInfo()。
  2. @Trace 装饰器使用：确保 [@Trace](/user/Trace) 装饰的属性在类中正确声明，并且初始值不为 undefined。
  3. 状态更新机制：@ObservedV2 和 [@Trace](/user/Trace) 依赖属性赋值来触发刷新，直接修改对象属性可能不会通知框架。建议使用新对象赋值或调用标记刷新的方法。

修改后的关键部分：

@ObservedV2
export class HumanInfo {
  [@Trace](/user/Trace) name: string = "";
  [@Trace](/user/Trace) age: number = 0;
}

// 在组件中
human: HumanInfo = new HumanInfo();

// 在 onClick 中，通过赋值新对象或直接修改后通知更新
onClick(() => {
  this.human = Object.assign(new HumanInfo(), {
    name: "456",
    age: (this.human.age || 0) + 1
  });
  // 或 this.human.name = "456"; this.human.age += 1; 并确保框架检测到变更
});

检查是否因对象引用未变导致页面不刷新，尝试重新赋值整个对象。如果仍不刷新，确认开发环境版本和装饰器兼容性。

回到顶部