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

【问题标题】：React Native warning: each child in a list should have a unique 'key' propReact Native 警告：列表中的每个孩子都应该有一个唯一的“键”道具
【发布时间】：2019-10-13 22:26:21
【问题描述】：

我正在创建一个渲染函数来显示数组中的信息。一切都运行得很好，但是当我运行项目时，我收到一个警告，说列表中的每个孩子都需要一个唯一的键。我研究了可能发生这种情况的所有原因，但是我不明白为什么会收到此警告。请帮帮我。

这里是完整的代码，从设置数据到渲染函数，谢谢：

this.state = {
feed: [{
    username: ["Its_Jess: ", "Animal_Luver: ", "Kyl3_Rayn3r: ", "Smith_Family: "],
    caption: ["The New Photoshoot was so much fun!", "AWWWW Look at them sleep!!", "Beautiful swim", "This photo is from our vacation <3"],
    coments: ["View All 49 Comments", "View All 19 Comments", "View All 69 Comments", "View All 4 Comments"],
    photo:[Pic1,Pic2,Pic4,Pic6],
    avatar:[Pic1,Ava1,Ava2,Ava3]
  }]
}
renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if(card.caption[i])
          return (
            <View>
            <TouchableHighlight 
            onPress={()=>this.toggleModal({photo:card.photo[i], avatar:card.avatar[i] ,caption:card.caption[i],username:card.username[i],coments:card.coments[i]})}
            underlayColor="white">
            <Card
            key={`${i}_${index}`}
image={card.photo[i]}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        key={card.avatar}
        size="small"
        rounded
        source={card.avatar[i]}
  />
    </View>
    <View style={{flexDirection:'row'}}>

    {this.state.isLiked[i] ?(
                        <Avatar
                  rounded
                  icon={{
                    name: 'heart-multiple-outline',
                    type: 'material-community',
                  }}
                  overlayContainerStyle={{
                    backgroundColor: '#ff4284',
                    marginLeft: 5,
                  }}
                  reverse
                  size="small"
                onPress={()=> this.toggleLike(i)}/>
    ) : (
     <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
   overlayContainerStyle={{marginLeft:5}}
   reverse
   size='small'
   onPress={()=> this.toggleLike(i)}/>
)}
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
    </View>
  </View>
    { this.state.fontLoaded == true ? (
      <View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}} key={username}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}} key={card.caption}>{card.caption[i]}</Text>
  </View>
            ) : (<Text> Loading...</Text>)
      }
          <Text style={{marginTop:4, color:'#878787'}} key={card.coments}>{card.coments[i]}</Text>
</Card>
</TouchableHighlight>
        </View>
          );
        return <React.Fragment />;
      });
    })
}
render(){
return (
<View>
{this.renderFeed()}
</View>
)}

【问题讨论】：

标签： react-native key state expo

【解决方案1】：

问题出在我声明key 的地方。我将 key={`${i}_${index}`} 从 <Card> 元素移动到 <View> 元素，现在警告消失了

【讨论】：

【解决方案2】：

为数组中的每个元素分配一个唯一的键始终是一个好习惯，因为键是提高 React 应用程序性能所必需的。请参阅下面的文章以准确了解为什么它是必要的。 Keys

【讨论】：