ReactNative警告：列表中的每个子级都应该有一个唯一的“键”属性
我是新手，我正在编写一个包含卡片的应用程序平面列表，但我发现这个错误，这是我的代码
constructor (props) {
super(props);
this.state = {
GridListItems: [ // Home Screen Cards Data [STATIC]
{ id: 1 , key: "222" , img: 'https://i.ibb.co/Lt88dTg/makeup.png' },
{ id: 2 ,key: "2" , img: 'https://i.ibb.co/H4NRnZK/Photographers.png'},
{ id: 3 ,key: "Wedding Halls" , img: 'https://i.ibb.co/b2JdtHW/wedding-Hall.png'},
{ id: 4 ,key: "Wedding Planners" , img: 'https://i.ibb.co/g95HhKT/image-1.jpg'},
{ id: 5 ,key: "Ateliers for Dresses" , img: 'https://i.ibb.co/g4ksBDk/wedding.png'},
]
};
}
renderItem = ({item}) => {
return(
<TouchableOpacity key={item.id.toString()}
style={styles.GridViewContainer}
>
</TouchableOpacity>
)
}
render () {
const carousel = this.mainCarousel(1); // Rendering the Carousel
return (
<SafeAreaView style={styles.safeArea}>
{ this.gradient }
<ScrollView
style={styles.scrollview}
scrollEventThrottle={200}
directionalLockEnabled={true}
>
{/* { carousel } */}
<FlatList
data={ this.state.GridListItems }
keyExtractor={(item) => item.id.toString()}
renderItem={ this.renderItem }
numColumns={2}
initialNumToRender={6}
/>
</ScrollView>
</SafeAreaView>
);
}
但是我得到警告：列表中的每个孩子都应该有一个独特的“钥匙”道具。有关更多信息，请参见https：//fb. me/react-warge-key。%s，
我做错了什么？
共有2个答案
我会做一个console.log的声明在keyExtractor，看看你得到了什么：
keyExtractor={(item, index) => {
console.log('item', item);
return item.id.toString();
}}
这样，您可以看到哪些数据被传递到函数中，并返回相关部分。
顺便说一下：平面列表是一个可滚动的列表，所以您不需要将其包装在滚动视图中。看见https://facebook.github.io/react-native/docs/flatlist
检查这是否解决了问题：keyExtractor={（{project， index}）=
keyExtractor={(item, index) => index.toString()}
-
问题内容： 我正在使用Google Books API构建应用，并且似乎正在向列表中的每个孩子传递唯一键，但是错误不会消失。我一定在做错事，但不确定。 请注意，在返回const books之后，我有一个console.log（book.id），它将在控制台中显示所有10个唯一的id键。但是，当我尝试使用key = {book.id}将其传递给该组件的子组件时，会出现此错误。 问题答案： 在需要去最
-
在这个简单的React应用程序中，我不明白为什么我会收到以下警告信息： 警告：列表中的每个孩子都应该有一个唯一的“键”道具。 对我来说，似乎我把密钥放在了正确的位置，形式为key={item.login.uuid} 我怎样才能摆脱警告信息？把钥匙放在哪里合适？ 应用程序。js 列表js
-
我对如何创建一个简单的todo应用程序的反应和探索方式还不熟悉。我当前收到错误“警告：列表中的每个孩子都应该有一个唯一的“键”道具。”一切似乎都很好，但我一定是做错了什么。 如果有人能帮上忙，那就br太好了/解释为什么会发生这个错误，那就太好了。
-
所以我想渲染数组，但它一直在说，警告：列表中的每个孩子都应该有一个唯一的“键”道具，即使它有唯一的键，我的数组包含三个元素，它甚至没有正确渲染第三个数组，按钮没有甚至因为某种原因第三李的工作。 更新：我从firebase获得的数据如下所示： 此代码将选择每个数据的标题 当我将鼠标悬停在“fikka-fikka”上时，“fikka-fikka”的按钮甚至不起作用。在ed sheeran和一个方向上，
-
虽然带有单选按钮的表单按预期工作（检查选定的选项并显示相应的组件），但我一直得到唯一的关键道具警告。 我使用一个对象数组将数据馈送到渲染函数并返回无线电输入jsx。 代码如下：（主要表格） （表格的资料来自何处） 和UserConfig组件： 感谢您的时间和投入：）
-
我正在使用GoogleBooksAPI构建一个应用程序，我似乎正在向列表中的每个孩子传递一个唯一的密钥，但错误不会消失。我一定是做错了什么，但我不知道是什么。 注意，在const books中返回后，我有一个控制台。日志（book.id），它将在控制台中显示所有10个唯一的id键。但是当我试图使用key={book.id}将它传递给这个组件的子组件时，我得到了这个错误。