时间戳

首页 > 解决方案 > React native - 使用数组映射的简单组件

react-native - React native - 使用数组映射的简单组件

问题描述

我应该使用 array.map 创建一个可点击组件的数组，但调试器在点击后返回有关索引的错误。

const iconsArray=['Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M','a'];

const showIcons = iconsArray.map((index)=>{

    return(
            <TouchableOpacity onPress={(index)=>this.chooseIcon(index)} style={styles.containerIcon} key={index}>
                <View>
                    <Text style={styles.iconStyle}>{index}</Text>
                </View>
            </TouchableOpacity> 
    );
  });

调试器的返回

标签： react-native

解决方案

你的每个 Touchable 组件都应该有一个名为 key 的 prop，每个组件都有唯一的值。这有助于做出反应以跟踪列出的组件以及您对它们执行的操作。

键应该是唯一的，因此最好让数组项具有其值和数组中每个项的 ID，而不是直接字符串数组，而是使用对象数组。

推荐阅读