关于 @State装饰器 在HarmonyOS 鸿蒙Next文档中的一个问题

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

关于 @State装饰器 在HarmonyOS 鸿蒙Next文档中的一个问题 在这篇文档中, 使用箭头函数改变状态变量未生效，有一段代码是这样写的的

import PlayDetailViewModel from './PlayDetailViewModel'

@Entry
@Component
struct PlayDetailPage {
  [@State](/user/State) vm: PlayDetailViewModel = new PlayDetailViewModel();

  build() {
    Stack() {
      Text(this.vm.coverUrl).width(100).height(100).backgroundColor(this.vm.coverUrl)
      Row() {
        Button('点击改变颜色')
          .onClick(() => {
            let self = this.vm;
            this.vm.changeCoverUrl(self);
          })
      }
    }
    .width('100%')
    .height('100%')
    .alignContent(Alignment.Top)
  }
}

当我把点击事件中的代码改成

Button('点击改变颜色')
          .onClick(() => {
            // let self = this.vm;
            // this.vm.changeCoverUrl(self);
            this.vm.changeCoverUrl(this.vm);
          })

把self改成this.vm颜色就不会变了，为什么？this.vm和self不是指向同一个对象吗


更多关于关于 @State装饰器 在HarmonyOS 鸿蒙Next文档中的一个问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
6 回复

文档内有一个反例和正例。

反例中，使用箭头函数的方式来改变状态变量未生效。这是因为箭头函数体内的 this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。在这个例子中，changeCoverUrl的 this指向 PlayDetailViewModel，而不是被装饰器@State代理的状态变量vm;所以颜色修改不会生效渲染UI

正例中：是将当前 this.vm传入，调用代理状态变量的属性赋值。这是因为箭头函数的 this一旦确定，就不能更改了。所以在这个例子中，正确的写法是在箭头函数中传入一个 PlayDetailViewModel类型的参数，然后通过这个参数来改变状态变量。

更多关于关于 @State装饰器 在HarmonyOS 鸿蒙Next文档中的一个问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


this指向我知道有问题，this.vm.changeCoverUrl传入this.vm和传入self，前者是不能改变颜色的，按道理this.vm和self是指向同一个对象。为什么直接this.vm不行，

在click中打印this.vm===self //true，把两个参数都传入changeCoverUrl中，this.vm===self //false。

因为this的上下文变了，let self = this.vm; 并在回调函数中通过 self.changeCoverUrl(self); 调用方法时，由于 self 变量在回调函数外部被声明并赋值，它保持了对原始 vm 对象的引用。因此，即使 this 的上下文改变了，self 仍然指向正确的对象，方法调用成功。

反之，无法指向正确的对象，

cke_184.png ```

关于@State装饰器在HarmonyOS鸿蒙Next文档中的一个问题，这里提供直接的解答。

在HarmonyOS开发中，@State装饰器用于标记类的成员变量为组件的状态变量。当这些状态变量发生变化时，系统会自动触发组件的重新渲染，以反映最新的状态。如果在文档中遇到关于@State装饰器的问题，可能的情况包括：

  1. 使用方式不明确：确保@State装饰器正确应用于类的成员变量前，且该变量为简单数据类型或可观察对象。

  2. 状态更新不触发渲染：检查状态变量的赋值操作是否在异步回调或事件处理函数中正确进行，并确保没有违反响应式系统的规则。

  3. 文档描述与实际行为不符：可能是由于文档版本更新导致的描述不一致，或存在特定场景下的限制未说明。

  4. 与其他装饰器冲突：确认@State装饰器是否与其他装饰器（如@Prop、@Link等）存在使用上的冲突或限制。

如果上述解答未能直接解决您的问题，可能是由于具体场景或代码实现上的差异。此时，建议直接查阅HarmonyOS官方文档的最新版本，或参考相关的开发者社区和论坛。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部