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

マップ使用時の React での「未定義のプロパティを読み取れません」エラー

問題:

ユーザーに「TypeError」が発生する: 一見正しい関数バインディングにもかかわらず、React アプリで「未定義のプロパティ 'onPlayerScoreChange'」エラーを読み取れません。

回答:

問題は、次の場合のマップの使用にあります。関数をプロパティとして渡します。マップ内で関数をバインドしないと、このコンテキストが変更され、React コンポーネントのプロパティにアクセスできなくなります。

バインディング オプション:

この問題を解決するには、次のいずれかを使用できます。アロー関数またはバインド関数を使用して、関数のコンテキストを React コンポーネントにバインドします。

Arrow Function:

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

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

これらのバインディング メソッドのいずれかを使用すると、関数が正しいコンテキストを持ち、React コンポーネントの this にアクセスできることが保証されます。

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