React コンポーネント関数内で「this」が未定義なのはなぜですか?それを修正するにはどうすればよいですか?

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

問題:

React コンポーネントの場合、メソッド内で「this」にアクセスしようとすると「未定義」エラーが発生します。コンポーネントには状態オブジェクトがあり、メソッド内でアクセスできる必要があります。開発者は、「this」がコンポーネント インスタンスを参照することを期待していますが、未定義のままです。

解決策:

ES6 React.Component はメソッドを自動的にバインドしません。コンポーネント自体。この問題を解決するには、コンストラクター内でメソッドを手動でバインドする必要があります。

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

}

メソッドをバインドすると、「this」はコンポーネント インスタンスを正しく参照し、状態やその他のプロパティにアクセスできるようになります。これにより、コンポーネント固有のデータにアクセスすることを目的としたメソッド内で「this」が定義されることが保証されます。

以上がReact コンポーネント関数内で「this」が未定義なのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。