当遍历地图以显示所有图像时，我收到警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

我有一个 Map 数据结构，其中地图的值包含图像 uri。我只想显示 Map.

中的所有图像

这是我所做的：

<View style={styles.container}>
{[...imagesMap.values()].map(myImg => {
        const source = {uri: myImg.uri};

        // Warning pointing to here
        return (<Image
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />);
      })}
</View>

当运行我的应用程序在 iOS 模拟器上时，它成功显示了所有图像。但是我在模拟器上收到一条警告 window，上面写着 Warning: Each child in a list should have a unique "key" prop 我不明白。我根本没有列表组件，只是遍历地图的值并显示图像。为什么我会收到该警告？

（警告信息指向我 return <Image> 所在的代码行）

Answer 1

当使用 JSX 从数组创建 UI 中的列表时，您应该为每个子项及其任何子项添加一个 key 属性。

示例<Text key={"uniqueID"} >Item</Text>

你应该使用这个

<View style={styles.container}>
{[...imagesMap.values()].map((myImg, index) => {
        const source = {uri: myImg.uri};

        // Warning pointing to here
        return (<Image
          key={index}
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />);
      })}
</View>

Answer 2

React 需要一个关键属性来跟踪数组元素的变化并在需要时重新渲染子组件。因为你必须让它成为 uniq，所以考虑一个好的上下文前缀而不是单个索引作为键。

<View style={styles.container}>
{[...imagesMap.values()].map((myImg, index) => {
        const source = {uri: myImg.uri};

        // Warning pointing to here
        return (<Image
          key={`img-${index}`}
          style={{
            width: 50,
            height: 50,
            position: 'absolute',
            left: 62,
            top: 26,
          }}
          source={source}
        />);
      })}
</View>

当遍历地图以显示所有图像时，我收到警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

When iterate over a map to show all images, I get warning: Each child in a list should have a unique "key" prop

react-native

react-native-android

react-native-ios

react-native-image