為什麼 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中文網其他相關文章！