如何解决警告问题：列表中的每个孩子都应该有一个独特的"key"道具，即使我正在使用关键道具

Question

这是我的代码

return (
<ScrollView>
<View style={{ padding: 10, flex: 1 }}>
{listing.map((listing) => (
<>
<View style={styles.containerOne} key={listing.snome_id}>
<View
id="listing"
style={styles.containerTwo}
>
<Text style={{ margin: 15, marginTop: 20 }}>
{listing.header}
</Text>
{listing.url.map((url) => (
<Image style={styles.pic} source={{ uri: url }} />
))}
<Text style={{ margin: 15, marginTop: 20 }}>
{' '}
{listing.description}
</Text>
</View>
</View>
</>
))}
</View>
</ScrollView>
);

我正在尝试查看多个列表以及相应的图像和一些文本。似乎即使我在视图组件中使用了一个关键道具，它仍然会给我带来错误，我不确定背后的原因。

我希望有人能帮我解决这个问题。

Answer 1

键总是需要给map函数创建的顶级组件。在你的代码中，这就是片段。你需要更换这个：

<>
<View style={styles.containerOne} key={listing.snome_id}>
...
</>

有了这个：

<React.Fragment key={listing.snome_id}>
<View style={styles.containerOne}>
...
</React.Fragment>