通过映射JSON呈现的每个组件，都会调用React Native OnPress

Question

我尝试搜索谷歌搜索，但是由于英语不是我最伟大的技能，所以我很难搜索正确的谷歌搜索。我自己尝试解决这个问题，但是我想知道是否有更好的方法可以做到这一点。

情况：

我有一个JSON对象，并且想渲染其中的值，因此我映射了值并将其渲染到组件中。我只需要一次调用该组件一次，它会多次呈现我的JSON对象中有多少个对象。

现在，当我在单个特定的渲染实例上启动OnPress函数时，它将为每个渲染实例发射。

所需的情况：

当我有多个组件的渲染实例，并且我在一个单一的情况下开火时，它只能为该实例发射。

代码：

我正在执行get请求，响应返回一个json对象：

{
"objects": [
    {
        "name": "Alarm chauffeurs@ON=100",
        "object_id": 1,
        "input_value": 0,
        "last_changed": "2019-03-08T14:30:54",
    }, ...

接下来我将值映射到我的组件：

      let cards = this.state.dataSource.objects.map((val, key) => {
      return (
         <Animated.View key={key} style={[cardStyle.container, { height: this.state.collapse[parseInt(val.object_id)] }]}>
            <TouchableHighlight onPress={() => this.toggle(val.object_id)} />
         </Animated.View>
      );
      });

现在，我只需要一次在我的主浏览中致电{cards}，并且反应本机将渲染多个卡：

      return (
         <View style={style.container}>
            <View style={style.colDash}>
               <ScrollView>
                  {cards}
               </ScrollView>
            </View>
        </View>
      );

这是输出的图像

现在，一旦我按下按钮，就会在屏幕上的每个组件上触发。

我已经尝试过：

创建一个数组并将随机值推向它，因为id总是从1开始。其余的是用简单的循环完成的。这可能不是解决我问题的最佳方法。

  toggle(id) {
     var test = []
     test.push(123);
     for (var i = 1; i < 8; i++) {
         if (id == i) {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                   toValue: 150,
                   duration: 500,
                }
             ).start()
             test.push(temp);
         }
         else {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                    toValue: 75,
                    duration: 1,
                }
             ).start()
             test.push(temp);
        }
     }
     this.setState({
         collapse: test
      });

稍后，我还想添加可能同时切换多个实例的可能性。到目前

向您的touchableHighlight组件添加索引，然后尝试