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

TouchableOpacity 的 onPress 属性采用一个回调函数，该函数在该元素被“按下”时调用。

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

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

改为这样做：

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

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

基本上，您在每个循环中更改provider 和gameId 中的值。回调函数在其闭包中有这些变量，但它们不存储定义这些函数时的确切值（基本上，当按下所有TouchableOpacity)。这也是因为您使用的是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，您的代码应该可以工作。）