React Map の反復で関数を正しくバインドするにはどうすればよいですか?

React Map 反復でのバインディング関数

問題ステートメント

React で Map 関数を使用すると、開発者は「TypeError: Cannot」というエラーが発生する場合があります。未定義のプロパティを読み取ります。」このエラーは、onPlayerScoreChange などの特定のメソッドがマップ関数内で呼び出されたが、正しくバインドされていない場合に発生します。

コンポーネント階層について

指定された React アプリケーションでは、データ フローとコンポーネント階層は次のように構造化されています:

• 親コンポーネント: アプリは孫コンポーネントと対話し、onPlayerScoreChange メソッドを処理します。
• 子コンポーネント: プレーヤーは祖父母からデータを受け取り、それを孫コンポーネントに渡します。
• 孫コンポーネント: カウンターはユーザー入力を処理し、祖父母コンポーネントの onPlayerScoreChange メソッドと対話します。

マップ関数のバインディング関数

このエラーは、onPlayerScoreChange メソッドが親コンポーネントのマップ関数内で正しくバインドされていないために発生します。マップ関数のコンテキストは React コンポーネントのコンテキストとは異なるため、マップ反復内で関数を使用する場合はバインディングが不可欠です。その結果、マップ関数内のこれは React コンポーネントを参照せず、そのプロパティへのアクセスの問題が発生します。

これを解決するには、2 つの一般的な方法があります:

アロー関数を使用する

アロー関数はコンポーネントのコンテキストを暗黙的にバインドします。この場合、次のコードによってエラーが解決されます。

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

関数バインディングを明示的に使用する

もう 1 つの方法は、bind メソッドを使用して関数を明示的にバインドすることです。これは、コンポーネントの this コンテキストを引数としてバインド メソッドに渡すことで実現できます。

<code class="javascript">{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)}
                    />
                )
            })}</code>

これらのメソッドのいずれかを使用してマップ反復内で onPlayerScoreChange メソッドをバインドすると、エラーは解決されるはずです。 .

以上がReact Map の反復で関数を正しくバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。