React Native列表中的每个子元素都应该有一个唯一的“key”属性

uoifb46i  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(72)

我正在尝试为iOS做一个React Native组件,它接受图像输入,消息说Each child in a list should have a unique "key" prop.我对React Native很陌生,所以我不明白“key”prop是什么以及在哪里添加它。
下面是我的代码:

function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
  const scrollView = useRef();

  return (
    <View>
      <ScrollView
        ref={scrollView}
        horizontal
        onContentSizeChange={() => scrollView.current.scrollToEnd()}
      >
        <View style={styles.container}>
          {imageUris.map((uri) => (
            <View key={uri} style={styles.image}>
              <ImageInput
                imageUri={uri}
                onChangeImage={() => onRemoveImage(uri)}
              />
            </View>
          ))}
          <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
        </View>
      </ScrollView>
    </View>
  );
}

字符串
我知道map()需要一个键,但我不明白一个键是做什么的,或者如何插入它。我正在学习一个教程,它适用于我正在学习的人。我认为大部分代码都能按预期工作,但在我的表单上显示这个组件,当选择一个图像时,没有图像的图片显示出来。我看了多个类似的问题,但我认为在这个脚本中已经有一个从URI添加的键。

zbsbpyhn

zbsbpyhn1#

这可能是一个痛苦,尝试这个。
URI可能会有重复。也就是说,您可以使用每个图像的URI和来自数组的索引创建自定义键。

function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
  const scrollView = useRef();

  return (
    <View>
      <ScrollView
        ref={scrollView}
        horizontal
        onContentSizeChange={() => scrollView.current.scrollToEnd()}
      >
        <View style={styles.container}>
          {imageUris.map((uri, index) => (
            <View key={`${uri}-${index}`} style={styles.image}>
              <ImageInput
                imageUri={uri}
                onChangeImage={() => onRemoveImage(uri)}
              />
            </View>
          ))}
          <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
        </View>
      </ScrollView>
    </View>
  );
}

字符串

相关问题