HarmonyOS 鸿蒙Next 【变量值不符合预期】按照以下Demo，打印出来的this.message为undefined

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

按照以下Demo，点击Bar的ThisButton时，打印出来的this.message为undefined. 可能对ts不太熟，按照我的理解this.message应该为’Hello World’，打印出来为undefined不太符合我的理解。 如果是我的代码的问题能指点下为什么是这个结果，以及如何得到我期望的结果吗？ demo代码如下

@Entry
@Component
struct ThisPage {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Bar({ builder: this.BarBuilder })
        Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).layoutWeight(1)
      }.width('100%')
    }.height('100%')
  }

  @Builder
  BarBuilder() {
    OneButton({
      onChange: () => {
        console.log(`Message: ${this.message}`)
        return false
      }
    })
  }
}

@Component
struct Bar {
  @BuilderParam builder?: () => void

  build() {
    Row() {
      Text('This is a bar').height(44).width('100%').layoutWeight(1)
      this.builder?.()
    }.padding(16).backgroundColor(Color.Pink)
  }
}

@Component
struct OneButton {
  onChange?: () => boolean

  build() {
    Button('Button').onClick(() => {
      this.onChange?.()
    })
  }
}

更多关于HarmonyOS 鸿蒙Next 【变量值不符合预期】按照以下Demo，打印出来的this.message为undefined的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
这是this指向的问题，由于箭头函数的this是指向函数的外层，而【BarBuilder】又是在【Bar】里被使用，所以当前的this指向Bar，拿的也就是bar里的message，也就是undefined

更多关于HarmonyOS 鸿蒙Next 【变量值不符合预期】按照以下Demo，打印出来的this.message为undefined的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，如果你遇到按照Demo运行后，打印出来的this.message为undefined的情况，通常是由于上下文（context）绑定问题或者变量作用域问题。

  1. 上下文绑定：检查this关键字的使用环境。在JavaScript风格的鸿蒙开发中（注意，这里不涉及Java或C语言），如果在一个回调函数中使用了this，可能会因为函数被当作普通函数调用而导致this指向全局对象（在严格模式下为undefined）。可以使用箭头函数来自动绑定外层作用域的this，或者使用.bind(this)方法来手动绑定。

  2. 变量作用域：确保message变量在使用前已被正确定义和赋值。如果message是在某个条件语句或函数内部定义的，那么它可能在外部不可见或未被正确初始化。

  3. 初始化检查：在打印this.message之前，检查this.message是否已被赋予了一个非undefined的值。

示例修正代码（假设使用的是类组件或类似结构）：

class MyComponent {
    constructor() {
        this.message = "Hello, HarmonyOS!";
    }

    printMessage = () => {
        console.log(this.message);  // 应正确打印 "Hello, HarmonyOS!"
    }
}

const myComp = new MyComponent();
myComp.printMessage();

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部