开发者问题收集

React:未捕获的TypeError:无法读取未定义的属性

2022-04-24
2086

我遇到如下问题:

class App extends React.Component {

  testop(){
    alert("test");
  }

  showAlert() {
    // alert("Im an alert");
    this.testop();
  }
  

  render() {
    return <button onClick={this.showAlert}>show alert</button>;
  }
}

运行代码时,出现错误“Uncaught TypeError: Cannot read properties of undefined (reading 'testop')”。为什么无法读取testop函数?

2个回答

问题是,您在 showAlert 中引用的 this 不是指组件的 this ,而是指内部方法 this

此问题有两种解决方案。

在组件的构造函数中将函数与组件的 this 绑定:

constructor (){
  this.showAlert = this.showAlert.bind(this);
}

或者使用提供词法作用域的 ES6 箭头函数

Vitaliy Rayets
2022-04-24

或者尝试使用箭头函数代替绑定

showAlert = () => {
  this.testop();
}

https://codesandbox.io/s/tender-ully-1ynyqm?file=/src/App.js

Piotr Glejzer
2022-04-24