在映射 json 呈现的每个组件上调用 React Native onPress答案

【问题标题】：React Native onPress gets called on every component rendered by mapping json在映射 json 呈现的每个组件上调用 React Native onPress
【发布时间】：2019-08-04 00:19:45
【问题描述】：

我尝试用谷歌搜索，但由于英语不是我最擅长的技能，我发现很难用谷歌搜索正确的东西。我已经尝试自己解决这个问题，但我想知道是否有更好的方法来做到这一点。

情况：

我有一个 json 对象并且想要在其中呈现值，所以我映射了这些值并将其呈现在一个组件中。我只需调用该组件一次，它会根据我的 json 对象中有多少对象而多次呈现自己。

现在，当我在单个特定渲染实例上触发 onPress 函数时，它将为每个渲染实例触发。

期望的情况：

当我的组件有多个渲染实例，并且我在一个实例上触发 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>
      );
      });

现在我只需在我的 MainView 中调用 {cards} 一次，React Native 就会渲染多张卡片：

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

Here's an image of the output

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

我试过了：

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

  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
      });

稍后，我还想添加能够同时切换多个实例的可能性。截至目前，当我触发一个 onPress 时，其余的都会重置。

【问题讨论】：

标签： javascript json reactjs react-native

【解决方案1】：

为你的 TouchableHighlight 组件添加一个索引，然后尝试

【讨论】：

抱歉，我该怎么做？
是的，添加一个键，onPress 处理程序无法识别您单击了哪个元素。类似于 key={key + '-highlight}