我有一个无法解决的问题,我有一串对象,它又有另一串对象
const data = [
{
title: 'Medical',
data: [{
notice: 'Test 1',
documentType: 'Medical',
file: 'https://test.1'
}],
}
];
我尝试在滚动视图组件中根据标题加载这些项
<View>
<Header title={PERSONAL_INFO}/>
<Center>
<ScrollView w={["200", "300"]} h="80">
{data.map((item, index) => (
(<View>
<Center>
<Heading>
{item.title}
</Heading>
{
data[index].data.map((item) =>
<Text>{item.notice}</Text>
)
}
</Center>
</View>)
))}
</ScrollView>
</Center>
</View>
只有一个条件,所有的东西都正确加载,我得到一个警告,我不能摆脱。
Warning: Each child in a list should have a unique "key" prop.
3条答案
按热度按时间7cjasjjr1#
当使用React呈现一个项目列表时,每个元素都应该被赋予一个唯一的
key
。这些键允许React更有效地更新它的组件树,方法是提供一种方法来确定某些组件是否只是移动了,而不需要更新。在他们的beta文档中的"为什么React需要键?"一节对此有一个很好的类比。也就是说,您只需要为每个
map
中呈现的最外层组件提供一个唯一的键。还请注意,* React文档建议不要将索引用作键 *(请参见章节末尾)。
yshpjwxd2#
尝试在
item.data
上Mapoxf4rvwz3#
您需要为Map时返回的每个项的顶级容器给予键,例如View和Text
如果您有Id可供引用,那就更理想了,因为使用索引作为键是一种反模式,但对于您用例来说可能没问题。