React Native使用array map创建可点击组件时点击后索引报错

嘿，我一眼就揪出你代码里的问题啦！这是map函数参数和onPress回调的典型误用，咱们一步步理顺：

核心问题拆解 #

你的代码里有两个关键错误，直接导致了索引相关的报错：

1. map参数顺序搞反+命名混乱：Array.map()的第一个参数是数组的元素，第二个才是索引。你把第一个参数命名为index，这不仅逻辑错位，还让后续的key和点击传值全乱了套。
2. onPress回调的参数覆盖：你在onPress里又声明了一个index参数，这个参数其实是点击事件对象（根本不是你想传的字母），它直接覆盖了外层的index（也就是数组元素），所以this.chooseIcon(index)传的完全不是你要的图标值！

修正后的代码 #

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((icon, index)=>{ 
  return( 
    <TouchableOpacity 
      onPress={() => this.chooseIcon(icon)} 
      style={styles.containerIcon} 
      key={index}
    > 
      <View> 
        <Text style={styles.iconStyle}>{icon}</Text> 
      </View> 
    </TouchableOpacity> 
  ); 
}); 

关键修正点说明 #

• 调整map参数：改成(icon, index)，第一个参数icon对应数组里的每个字母，第二个index才是真正的索引值
• 简化onPress回调：别在箭头函数里加参数，直接调用this.chooseIcon(icon)，这样就能把当前点击的字母正确传递给chooseIcon方法
• 关于key：这里用index作为key是稳妥的选择（如果你的图标数组不会动态排序/增删，也可以用唯一的icon值当key）

内容的提问来源于stack exchange，提问作者Federico Raimondi