React Native in Array에서 값을 함수로 전달

JSON 배열에서 데이터를 추출하고 그 중에서 객체를 생성하고 for 루프를 사용하여 생성중인 객체 내의 배열에서 필요한 문자열 값을 설정합니다.React Native in Array에서 값을 함수로 전달

아래와 같이 return() 기능에

var gamesList = []; 
gamesList = this.props.navigation.state.params.gamesList; 
var gameIconList = []; 

for(var i=0;i<3;i++){ 
    var provider = gamesList[i].provider; 
    var gameId = gamesList[i].gameId.toString(); 

    gameIconList.push(
    <TouchableOpacity onPress={(provider,gameId) => this.launchGame(provider,gameId)}> 
     <ResponsiveImage source={{uri: gamesList[i].imageUrl}} 
     initWidth="200" initHeight="120" defaultSource={require('./splash-tile2.png')} /> 
    </TouchableOpacity> 
); 
}

이 모든 render() 함수 내에서 발생하고 {gameIconList}가 호출됩니다

return(
<ScrollView horizontal={true}> 
    {gameIconList} 
</ScrollView> 
);

당신은 내가 onPress에의 (SECURITY) 기능을 비활성화로 문자열 값을 설정하고 볼 수 있듯이 이온 루프를 통해 전화와 나는 TouchableOpacity 내에서 이미지를 클릭하면 내가되는 위의 함수로 다시 보낼 설정하고있는 문자열 값을 원하는 :

launchGame = (provider, gameId) => { 

    params = { 
    Provider: provider.nativeEvent.text, 
    Platform: this.state.Platform, 
    Environment: this.state.Environment, 
    GameId: gameId, 
    IsDemo: this.state.IsDemo 
    }; 

    request = { 
    method: 'POST', 
    headers:{ 
     "Content-Type": "application/json" 
    }, 
    body: params 
    }; 

}

는 그러나 문제는 내가 시도되는 다른 많은 메서드와 나는 항상 프로 시저 값을 얻는 것을 끝내고 프로 바이더 값에 관해서는 나에게 보내졌고, 정의되지 않은 값은 gameId 값에 관해서 나에게 보내졌다.

나는 event.target.value과 event.nativeEvent.text이라는 호출 방법을 시도했지만 아무 소용이 없습니다.

무엇이 누락 되었습니까? 이것이 올바른 값으로 함수에 전달되지 않는 경우 제대로 수행하는 방법에 대한 지침을 얻을 수 있습니까?

출처

2017-12-05 Tyson

TouchableOpacity의 onPress 소품은 해당 요소를 "눌렀을 때"호출되는 콜백 함수를 사용합니다.

이 함수는 이벤트 처리기로 간주됩니다. 이벤트 처리기가 event 개체와 함께 호출되는 것이 일반적입니다. 콜백 함수가 어떻게 호출되는지 오해하고 있다고 생각합니다. this을 클릭하십시오.

따라서 첫 번째 인수에는 이벤트 객체 (React의 프록시 이벤트 객체)가 있고 두 번째 인수는 undefined 인 함수가 호출됩니다.

<TouchableOpacity onPress={() => this.launchGame(provider, gameId)}>

을하지만 더있다 :

대신이 작업을 수행합니다. 이것은 아마도 클로저가 작동하는 방식 때문에 제대로 작동하지 않을 것입니다. here을 참조하십시오.

기본적으로 각 루프마다 provider 및 gameId의 값이 변경됩니다. 콜백 함수는 클로저에서 이러한 변수를 갖지만 이러한 함수가 정의되었을 때 있었던 정확한 값을 저장하지 않습니다. 기본적으로에 저장된 마지막 값은 provide이고 을 누르면 gameId에 저장됩니다. 또한 var (let 또는 const) 대신 기능 범위가 있고 범위를 차단하지 않았기 때문입니다.

대신이 작업을 수행 할 수 있습니다

<TouchableOpacity onPress={() => { 
    var provider = gamesList[i].provider; 
    var gameId = gamesList[i].gameId.toString(); 
    this.launchGame(provider, gameId) 
}}> 
    <ResponsiveImage 
    source={{uri: gamesList[i].imageUrl}} 
    initWidth="200" 
    initHeight="120" 
    defaultSource={require('./splash-tile2.png')} 
    /> 
</TouchableOpacity>

직접 각 콜백의 범위에 이러한 변수를 정의하는이 방법. (또는 let 또는 const을 사용할 수있는 경우 provider 및 gameId을 정의하면 var을 const으로 변경하면 코드가 작동합니다.)

출처

2017-12-05 04:34:18 squgeim

내가 OP를 요청했을 때와 같은 기능에 오류가 발생했습니다. 클릭 할 때 ID를 설정 한 후이 대답에 따라'undefined is not object (evaluation 'response.data [i] .category ')'하지만 동일한'response.data [i] .category'는 텍스트 필드에 이름을 출력합니다. –

'onPress = {This.launchGame.bind (this, gamesList [i] .provider, gamesList [i] .gameId)}'마침내 나를 위해 일했다 :) –

React Native in Array에서 값을 함수로 전달

답변

관련 문제