React Native中如何在控制台打印state？解决‘Cannot read property 'petname' of undefined’报错

首先，你遇到的Cannot read property 'petname' of undefined错误，核心原因是**this的指向问题**：当你把this.addPet直接传给Button的onPress时，回调执行时this并没有指向你的App组件实例，导致this.state是undefined，自然就取不到petname了。

控制台打印state的正确方式 #

要正确打印state，你需要先确保this指向组件实例，下面是三种常用的解决办法：

方法1：在构造函数中绑定this

修改你的构造函数，手动把addPet方法的this绑定到组件实例：

constructor(props) {
  super(props)
  this.state = { petname: '', owner: '' };
  // 新增这行绑定
  this.addPet = this.addPet.bind(this);
}

这样addPet里的this就会一直指向组件实例，console.log(this.state.petname)就能正常工作了。

方法2：用箭头函数定义addPet

箭头函数会自动继承外层作用域的this，所以直接用箭头函数定义方法：

addPet = () => {
  console.log("Button Pressed");
  console.log(this.state.petname);
  // 你的逻辑代码
}

这种写法更简洁，不需要手动绑定this。

方法3：在onPress中使用箭头函数包裹

在Button的onPress里直接用箭头函数调用addPet：

<Button title="Add Pet" onPress={() => this.addPet()} />

不过这种方式每次render都会创建新的箭头函数，性能敏感场景需要注意，但小组件里完全没问题。

为什么这里称其为property？ #

在JavaScript里，对象的键值对都可以被称为property（属性）：

• this.state是你的App组件实例的一个property，React组件内置了这个属性用来管理内部状态；
• petname是state这个对象的一个property，也就是你定义的状态字段。
  和method（方法）相对，property是对象上存储的数据，而method是对象上的函数。

内容的提问来源于stack exchange，提问作者Arun kumar