将值从数组传递给 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 函数调用中，当我单击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
};
}

但问题是我已经尝试了很多不同的方法，当涉及到提供程序值时，我总是最终会得到一个 Proxy 对象发回给我，而在涉及 gameId 值时，我总是收到一个未定义的对象发送给我。

我已经尝试了event.target.value和event.nativeEvent.text的调用方法，但无济于事。

我错过了什么？ 如果这不是向函数发送值的正确方式，我可以获得有关如何正确执行此操作的指南吗？

Answer 1

TouchableOpacity的onPressprop 采用一个回调函数，该函数在"按下"该元素时调用。

此函数应该是事件处理程序。通常使用event对象调用事件处理程序。我认为您误解了如何调用回调函数。请通过这个。

因此，您的函数在第一个参数中与事件对象(React 中的代理事件对象)一起调用，undefined作为第二个参数调用。

请改为执行以下操作：

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

但还有更多。由于闭包的工作方式，这可能无法正常工作。看这里。

基本上，您正在更改每个循环中provider和gameId的值。回调函数的闭包中包含这些变量，但它们不存储定义这些函数时存在的确切值(基本上，当按下所有TouchableOpacity时，您将获得存储在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，您的代码应该可以工作。