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

Question

我应该使用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> 
    );
  });

the return from the debugger

Answer 1

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

键应该是唯一的，所以最好让数组项的值和数组中每个项的ID，而不是直接字符串数组，有一个对象数组。