React에서 '정의되지 않은 속성을 읽을 수 없습니다' 오류를 해결하는 방법은 무엇입니까?

map 사용 시 React에서 "정의되지 않은 속성을 읽을 수 없습니다" 오류

문제:

사용자에게 "TypeError"가 발생함 : 함수 바인딩이 올바른 것처럼 보임에도 불구하고 React 앱에서 정의되지 않은 'onPlayerScoreChange' 속성을 읽을 수 없습니다.

답변:

문제는 다음과 같은 경우 지도 사용에 있습니다. 함수를 속성으로 전달합니다. 맵 내에서 함수를 바인딩하지 않으면 컨텍스트가 변경되고 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>

바인딩:

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!