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

React コンポーネント関数の「this」を理解する

React を使用する場合、「これはコンポーネント関数内で未定義です」というエラーが発生する場合があります。これは、コンポーネント関数内で 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 メソッドをバインドすることで、これが確実に参照するようになります。メソッドが呼び出されるときに正しいコンポーネント インスタンスが返されます。これにより、loopActive 状態を正常に更新し、親コンポーネントによって渡された onToggleLoop プロパティを実行できるようになります。

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