React の Map 関数で「TypeError: Unknown のプロパティを読み取れません」を修正する方法

Map 関数を使用した React での「未定義のプロパティを読み取れません」エラー

React アプリケーションで、「TypeError: 未定義のプロパティ 'onPlayerScoreChange' を読み取れません」というエラー メッセージが表示される" は通常、map 関数を使用するときのバインディングの問題を示します。この問題を解決する方法は次のとおりです。

map 関数は、既存の配列を反復処理し、要素ごとにコールバック関数を呼び出すことにより、新しい配列を作成します。コールバック関数内では、これは React コンポーネントのコンテキストではなく、グローバル コンテキストを指します。したがって、適切なバインドがないと、コールバック関数内から React コンポーネントのプロパティにアクセスすると、「未定義」エラーが発生します。

これを解決するには、アロー関数を使用するか、コールバック関数を React にバインドします。コンポーネントのコンテキスト。

アロー関数を使用する場合:

アロー関数は周囲の関数のコンテキストを継承するため、マップ コールバックにアロー関数を使用するだけで済みます:

<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>

Bind を使用する:

または、マップ コールバック関数を React コンポーネントのコンテキストに手動でバインドできます:

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

次のいずれかを実装しますこれらのメソッドのうち、 this コンテキストは正しくバインドされ、マップ コールバック関数内で React コンポーネントのプロパティにアクセスし、「未定義」エラーを回避できるようになります。

以上がReact の Map 関数で「TypeError: Unknown のプロパティを読み取れません」を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。