为什么 React 组件函数中的'this”未定义，我该如何修复它？

理解 React 组件函数中的“this”

使用 React 时，您可能会遇到“this 在组件函数中未定义”错误。当您尝试在组件函数中访问 this 对象且该对象未定义时，就会发生这种情况。

在 ES6 React.Component 中，方法不会自动绑定到组件本身。相反，您需要在构造函数中显式绑定它们。要解决示例中提到的问题，可以使用以下步骤：

1. 在构造函数中绑定方法：
   在构造函数中添加以下行绑定 onToggleLoop方法：

   this.onToggleLoop = this.onToggleLoop.bind(this);

2. 更新组件：
   使用修改后的构造函数更新组件，如下所示：

   class PlayerControls extends React.Component {
     constructor(props) {
       super(props)
   
       this.state = {
         loopActive: false,
         shuffleActive: false,
       }
   
       this.onToggleLoop = this.onToggleLoop.bind(this);
     }
   
     // ... rest of the code
   }

通过在构造函数中绑定 onToggleLoop 方法，可以确保 this 引用正确的组件调用方法时的实例。这允许您成功更新loopActive状态并执行父组件传递的onToggleLoop prop。

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