React のマップ関数の「未定義のプロパティを読み取れません」エラーを解決するにはどうすればよいですか?

React のマップ関数の「未定義のプロパティを読み取れません」エラーを理解する

React の開発では、「TypeError」エラーがよく発生します。 : マップ関数の利用中に、unknown のプロパティ 'onPlayerScoreChange' を読み取れません。この問題は通常、map 関数のバインディング プロセスが正しくないために発生します。

Context

提供されたコードには、次のコンポーネントを含む階層コンポーネント構造があります。

• 親: アプリ
• 子: プレイヤー
• 孫: Counter

「onPlayerScoreChange」メソッドは App コンポーネントで定義されていますユーザー入力に基づいてプレーヤーのスコアを更新することを目的としています。

問題

エラーは、「アプリ」コンポーネントのマップ関数内で発生します。 onScoreChange" プロパティは App コンポーネントの "onPlayerScoreChange" メソッドに割り当てられます:

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

ただし、マップ関数のコンテキストは React コンポーネントのコンテキストとは異なります。その結果、関数内の "this" が App コンポーネント以外のものを参照し、"this.onPlayerScoreChange" が未定義になります。

解決策

これを解決するにはこの問題では、map 関数を App コンポーネントのコンテキストにバインドする必要があります。これは、アロー (ラムダ) 関数またはバインド メソッドを使用して実現できます。

アロー関数の使用

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

アロー関数は、「this」値を自動的にバインドします。

Bind メソッドの使用

{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)}
        />
    )
}.bind(this))}

bind メソッドは、マップ関数を App コンポーネントのコンテキストに明示的にバインドします。 .

以上がReact のマップ関数の「未定義のプロパティを読み取れません」エラーを解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。