HarmonyOS 鸿蒙Next @State状态变量问题答疑

发布于 1周前 作者 gougou168 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next @State状态变量问题答疑

class Son {
  son: string = '000';

  constructor(son: string) {
    this.son = son;
  }
}

class Parent {
  son: Son = new Son('111');
}

@Entry
@Component
struct Test {
  [@State](/user/State) son: Son = new Son('222');
  [@State](/user/State) parent: Parent = new Parent();

  aboutToAppear(): void {
    this.parent.son = this.son;
  }

  build() {
    Column() {
      Text(`${this.son.son}`);
      Text(`${this.parent.son.son}`);
      Button('change').onClick(() => {
        this.parent.son = new Son('444');
        this.parent.son.son = '333';
      })
    }
  }
}

按照[@State](/user/State)装饰器的特性,嵌套类型无法观测到二层属性的变化,为什么this.parent.son.son = '333'这句话能够生效,而不是显示“444”。


更多关于HarmonyOS 鸿蒙Next @State状态变量问题答疑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

因为this.parent.son = new Son(‘444’); 这句话触发了刷新,有个刷新信号,但是刷新执行是在onclick执行结束后执行的,就把里面包含的数据页一起刷新了,如果你把this.parent.son = new Son(‘444’); 这句话注释掉,就不会刷新,或者分开执行,也无法刷新,参考demo:

class Son {
 son: string = '000';

 constructor(son: string) {
   this.son = son;
 }
}

class Parent {
 son: Son = new Son('111');
}

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Test {
 [@State](/user/State) son: Son = new Son('222');
 [@State](/user/State) parent: Parent = new Parent();

 aboutToAppear(): void {
   this.parent.son = this.son;
 }

 build() {
   Column() {
     Text(`${this.son.son}`);
     Text(`${this.parent.son.son}`);
     Button('change1')
       .onClick(() => {
         this.parent.son = new Son('444');
       })
     Button('change2')
       .onClick(() => {
         this.parent.son.son = '333';
       })
   }
 }
}

更多关于HarmonyOS 鸿蒙Next @State状态变量问题答疑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


根据[@State](/user/State)的机制,确实如你所说。

但是在onclick点击事件处理逻辑里,你又操作了this.parent.son = new Son('444'); 

这句代码会导致state生效。如果注释掉。你的this.parent.son.son就不会生效了。

HarmonyOS 鸿蒙Next @State状态变量问题答疑

在HarmonyOS鸿蒙开发中,@State状态变量用于声明组件的响应式数据。这类数据的变化会触发组件的重新渲染,从而实现UI的动态更新。

  1. @State的定义

    • 使用@State注解的变量必须是类的成员变量。
    • 变量的类型可以是基本数据类型、集合类型、自定义对象等,但要求这些类型是可序列化的,以便框架能够追踪其变化。
  2. @State的使用

    • 在组件的方法中修改@State变量时,框架会自动检测到变化并触发UI更新。
    • 无需手动调用刷新或重绘方法。
  3. 注意事项

    • 避免在组件的构造函数或初始化块中直接修改@State变量,因为这可能导致渲染时机问题。
    • 如果需要在组件创建时初始化@State变量,可以在一个@Effect或生命周期方法中进行。
  4. 调试技巧

    • 使用开发者工具中的“状态管理”面板,可以实时查看和监控@State变量的变化。
    • 通过日志打印来跟踪@State变量的变化,有助于调试和定位问题。

如果在使用@State状态变量时遇到具体问题,如数据未更新、渲染异常等,请检查变量的定义、修改位置以及类型是否符合要求。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部