如何解决 Warning: E​​ach child in a list should have a unique "key" prop even I using key props 问题如何解决

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

key总是需要给map函数创建的top-level组件。在您的代码中，这就是片段。您需要替换它：

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

有了这个：

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