为什么 React 组件函数中的'this”未定义？

React：“this”在组件函数中未定义

在 React 中使用组件时，您可能会遇到错误“this is组件中定义的函数内的“未定义”。这可能会令人困惑，因为根据官方文档， this 应该引用组件实例。那么，为什么会出现这个错误呢？

问题出在 React 初始化类组件的方式上。与旧式 ES5 类不同，ES6 React 组件不会自动将类方法绑定到实例。这意味着，如果您在组件内部定义了一个函数，例如事件处理程序，则该函数中的 this 将不会引用该组件。

要解决此问题，您需要手动将该方法绑定到该组件构造函数中的实例。以下是在示例中执行此操作的方法：

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

通过将 onToggleLoop 方法绑定到构造函数中的组件，可以确保从事件处理程序调用该方法时 this 引用该组件。这允许您在方法中访问组件的状态和属性。

请记住在构造函数中绑定任何需要访问组件实例的类方法，以避免“this is undefined”错误。

以上是为什么 React 组件函数中的'this”未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！