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

React 맵 함수의 "Cannot Read Property of Un Defined" 오류 이해

React 개발에서는 "TypeError" 오류가 발생하는 것이 일반적입니다. : 지도 기능을 활용하는 동안 정의되지 않은 'onPlayerScoreChange' 속성을 읽을 수 없습니다. 이 문제는 일반적으로 지도 기능의 잘못된 바인딩 프로세스로 인해 발생합니다.

Context

제공된 코드에는 다음 구성 요소가 포함된 계층적 구성 요소 구조가 있습니다.

• 상위: 앱
• 하위: 플레이어
• 손자: 카운터

"onPlayerScoreChange" 메소드는 앱 구성 요소에 정의됩니다. 사용자 입력에 따라 플레이어의 점수를 업데이트하도록 되어 있습니다.

문제

"App" 구성 요소의 지도 기능 내에서 오류가 발생합니다. 여기서 " onScoreChange" prop은 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"가 정의되지 않게 됩니다.

해결 방법

이 문제를 해결하려면 문제가 발생하면 지도 기능을 App 구성 요소의 컨텍스트에 바인딩해야 합니다. 이는 화살표(람다) 함수 또는 바인딩 방법을 사용하여 수행할 수 있습니다.

화살표 함수 사용

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

화살표 함수는 자동으로 "this" 값을 바인딩합니다. 주변 범위에 연결하므로 명시적 바인딩이 필요하지 않습니다.

바인드 메서드 사용

{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))}

바인드 메서드는 맵 함수를 App 구성 요소의 컨텍스트에 명시적으로 바인딩합니다. .

위 내용은 React의 맵 함수에서 '정의되지 않은 속성을 읽을 수 없습니다' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!