React Native 错误：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React Native Error : Each child in a list should have a unique "key" propReact Native 错误：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-04-01 04:02:48
【问题描述】：

我正在尝试创建 pin 锁定屏幕。问题出现在 num pads 部分。它说“列表中的每个孩子都应该有一个唯一的“key”道具。”我不知道我的代码有什么问题。

这是我的数字键盘列表。

render() {
        let numberPads = [
            {id: 1,value: '1', style: styles.numPad},
            { id: 2,value: '2', style: styles.numPad },
            { id: 3,value: '3', style: styles.numPad },
            { id: 4,value: '4', style: styles.numPad },
            { id: 5,value: '5', style: styles.numPad },
            { id: 6,value: '6', style: styles.numPad },
            { id: 7,value: '7', style: styles.numPad },
            { id: 8,value: '8', style: styles.numPad },
            { id: 9,value: '9', style: styles.numPad },
            { id: 10,value: '', style: styles.keyPad },
            { id: 11,value: '0', style: styles.numPad },
            { id: 12,value: '11', style: styles.keyPad }
        ]
        return (........) }

这是上面数字键盘的渲染方式。

render(){
   ......
   return(
   .....
   <View style={styles.numPadContainer}>
     {numberPads.map(numberPad => {
             let numPad = numberPad.id != 12 ?
                   <TouchableOpacity style={numberPad.style} key={numberPad.id}
                    onPress={() => this.onPressNumberPad(numberPad.value)}
                    >
                        <Text style={styles.numText} >{numberPad.value}</Text>
                   </TouchableOpacity> :
                   <TouchableOpacity style={numberPad.style} key={numberPad.id}
                    onPress={() => this.onPressDeletePad()}
                    >
                         <Image  source={require('../assets/images/clear-icon-50px.png')} />
                    </TouchableOpacity>
                    return (
                             numPad
                    )
       })}
    </View>
    ......
    )
}

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我认为您上面的代码没有问题。它可能在您的代码中的另一个地方您没有全部显示。再次检查您的代码或在此处显示所有错误日志。

【讨论】：

是的，你是对的。我的代码中碰巧有另一个 map() 。经过仔细的错误日志检查，我发现警告指示的是 map() 而不是这个。非常感谢。

【解决方案2】：

TouchableOpacity 中的children 也必须有key props。

您可以在此post 中找到更多信息。

【讨论】：

【解决方案3】：

每个 Flatlist 项目必须具有唯一标识以避免重复

使用 Flatlist 的 keyExtractor 属性，它将解决您的问题

<FlatList 
    data={ props.data }
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item}) => <Item tittle = { item }  />}
/>

【讨论】：

【解决方案4】：

render(){
   ......
   return(
   .....
   <View style={styles.numPadContainer}>
     {numberPads.map((numberPad,index) => {
             let numPad = numberPad.id != 12 ?
                   <TouchableOpacity style={numberPad.style} key={numberPad.id.toString()}
                    onPress={() => this.onPressNumberPad(numberPad.value)}
                    >
                        <Text style={styles.numText} >{numberPad.value}</Text>
                   </TouchableOpacity> :
                   <TouchableOpacity style={numberPad.style} key={numberPad.id.toString()}
                    onPress={() => this.onPressDeletePad()}
                    >
                         <Image  source={require('../assets/images/clear-icon-50px.png')} />
                    </TouchableOpacity>
                    return (
                             numPad
                    )
       })}
    </View>
    ......
    )
}

【讨论】：