React Map 반복에서 함수를 올바르게 바인딩하는 방법은 무엇입니까?

React 맵 반복에서 함수 바인딩

문제 설명

React에서 맵 함수를 사용할 때 개발자는 "TypeError: Cannot" 오류가 발생할 수 있습니다. 정의되지 않은 속성을 읽어보세요." 이 오류는 onPlayerScoreChange와 같은 특정 메소드가 지도 함수 내에서 호출되었지만 올바르게 바인딩되지 않은 경우 발생합니다.

구성 요소 계층 구조 이해

지정된 React 애플리케이션에서 데이터 흐름 및 구성 요소 계층 구조는 다음과 같습니다.

• Grandparent 구성 요소: 앱은 손자 구성 요소와 상호 작용하고 onPlayerScoreChange 메서드를 처리합니다.
• Child 구성 요소: 플레이어는 조부모로부터 데이터를 받아 손자 구성 요소에 전달합니다.
• 손자 구성 요소: 카운터는 사용자 입력을 처리하고 조부모 구성 요소의 onPlayerScoreChange 메서드와 상호 작용합니다.

지도 함수에 대한 바인딩 함수

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>

함수 바인딩을 명시적으로 사용

또 다른 접근 방식은 바인드 메서드를 사용하여 함수를 명시적으로 바인딩하는 것입니다. 이는 구성 요소의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!