React で「map」を使用して「onPlayerScoreChange」プロパティを読み取れないのはなぜですか?

「マップ」使用時の React での「プロパティを読み取れません」エラーの原因を明らかにする

React で作業しているときに、エラー " が発生しましたTypeError: 未定義のプロパティ 'onPlayerScoreChange' を読み取れません」というメッセージが表示されてイライラすることがあります。これは通常、問題の関数のバインディングが不十分なために発生します。

提供されたコードの 'onPlayerScoreChange' は、プレーヤーのスコアが変更されたときに実行されるメソッドです。このメソッドは、Grandparent コンポーネント内にあります。ただし、調査の結果、親コンポーネントの 'map' 関数内で 'onPlayerScoreChange' をバインドする際の見落としが判明しました。

「this」コンテキストを理解する

この問題を理解するには、次のようにします。 JavaScript 関数内の「this」コンテキストを詳しく調べる必要があります。通常の関数 (アロー関数以外) 内で 'this' 式を使用する場合、その値は関数の呼び出し方法に依存します。したがって、「map」関数内で「this.onPlayerScoreChange」を実行すると、「this」は親コンポーネントのコンテキストではなく、「map」関数の実行コンテキストを参照します。

バインディングの問題の解決

この問題を解決するには、「this」が親コンポーネントを適切に参照できるように、「onPlayerScoreChange」が親コンポーネントのコンテキストにバインドされていることを確認する必要があります。これは 2 つの方法で実現できます。

オプション 1: アロー関数

アロー関数は、直接の字句スコープから「this」コンテキストを継承し、明示的なコンテキストの必要性を排除します。バインディング。 「マップ」内の通常の関数をアロー関数に置き換えることにより、「this」コンテキストは自動的に親コンポーネントを指すようになります:

{this.state.initialPlayers.map((player, index) => {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
})}

オプション 2: バインド メソッド

あるいは、「bind」メソッドを使用して、通常の関数を親コンポーネントのコンテキストにバインドすることもできます。このアプローチには、関数を呼び出すときに 'this' の値を明示的に指定することが含まれます。

{this.state.initialPlayers.map(function(player, index) {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
}.bind(this))}

結論

適切な関数バインディングを実装することで、「 「map」関数を使用すると、React で「未定義のプロパティ 'onPlayerScoreChange' を読み取れません」というエラーが発生します。

以上がReact で「map」を使用して「onPlayerScoreChange」プロパティを読み取れないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。