React Nativeの配列への値の受け渡し

Question

JSON配列からデータを抽出し、そこからオブジェクトを作成し、forループを使用して作成しているオブジェクト内の配列から必要な文字列値を設定します。

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()関数内で呼び出されます。

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

あなたは私がたonPress FUNCTに文字列値を設定しています見ることができるようにイオンは、ループを介して呼び出すと、私は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の呼び出し方法を試しましたが、役に立たないです。

私には何が欠けていますか？ これが関数に値を送信する正しい方法でない場合、正しく行う方法についてのガイドを入手できますか？

Answer 1

TouchableOpacityのpropは、その要素が「押された」ときコールされるコールバック関数をとります。

この関数は、イベントハンドラとされています。イベントハンドラはeventオブジェクトで呼び出されるのが一般的です。私はあなたがコールバック関数が呼び出される方法を誤解していると思います。 thisまで行ってください。

したがって、最初の引数でイベントオブジェクト（Reactのプロキシイベントオブジェクト）を呼び出し、2番目の引数としてundefinedを使用して関数を呼び出します。

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

をしかし、より多くのがあります：

代わりにこれを行います。これはおそらく、クロージャの仕組みのために正しく動作しません。 hereを参照してください。

基本的に、各ループの値をproviderとgameIdに変更しています。コールバック関数はこれらの変数をクロージャーに持っていますが、これらの関数が定義されたときの正確な値は格納されません（TouchableOpacityのすべてを押すと、provideとgameIdに格納された最後の値が得られます）。これは、varを使用しているため、または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に変更すると、コードが機能するはずです。）