Я создаю функцию рендеринга для отображения информации из массива. Все работает нормально, но когда я запускаю проект, я получаю предупреждение о том, что каждому ребенку в списке требуется уникальный ключ. Я исследовал все причины, по которым это может происходить, но я не понимаю, почему я получаю это предупреждение. Пожалуйста, помогите мне.
Вот весь код, от установки данных и рендеринга функции, спасибо:
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>
)}