将值从数组传递给 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
  };

}

但问题是我尝试了很多不同的方法，当涉及到 provider 值时，我总是最终将 Proxy 对象发送回我，而当涉及到 gameId 值时，我总是收到一个 undefined 发送给我。

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

我错过了什么？如果这不是向函数发送值的正确方法，我能否获得有关如何正确执行的指南？

Answer 1

在onPress为道具TouchableOpacity需要时元素被“逼”，也就是所谓的回调函数。

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

因此，您的函数在第一个参数和undefined第二个参数中使用事件对象（React 中的代理事件对象）调用。

改为这样做：

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

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

基本上，您正在更改每个循环中provider和gameId上的值。回调函数在它的关闭这些变量，但他们不存储在那里时定义这些函数的精确值（基本上，你会得到存储在最后一个值provide，并gameId在所有的压制时TouchableOpacity）。这也是因为您使用的是var, 而不是letor 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>

通过这种方式，您可以直接在每个回调的范围内定义这些变量。（或者，如果您可以使用letor const，var请const在定义providerand时更改为gameId，您的代码应该可以工作。）