React: "this" はコンポーネント関数内で未定義です

React でコンポーネントを操作するときに、「this is」というエラーが発生することがあります。コンポーネント内で定義された関数内で「未定義」。公式ドキュメントによれば、これはコンポーネントのインスタンスを指すはずなので、これは混乱を招く可能性があります。では、なぜこのエラーが発生するのでしょうか?

問題は、React がクラス コンポーネントを初期化する方法にあります。古いスタイルの ES5 クラスとは異なり、ES6 React コンポーネントはクラス メソッドをインスタンスに自動的にバインドしません。これは、イベント ハンドラーなどのコンポーネント内で関数が定義されている場合、その関数内の this はコンポーネントを参照しません。

これを解決するには、メソッドをコンポーネントに手動でバインドする必要があります。コンストラクター内のインスタンス。あなたの例でそれを行う方法は次のとおりです:

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

}

onToggleLoop メソッドをコンストラクター内のコンポーネントにバインドすることで、メソッドがイベント ハンドラーから呼び出されたときに、このメソッドがコンポーネントを参照するようになります。これにより、メソッド内のコンポーネントの状態と props にアクセスできるようになります。

「これは未定義です」エラーを回避するために、コンストラクター内のコンポーネント インスタンスにアクセスする必要があるクラス メソッドを忘れずにバインドしてください。