Блог

У меня есть 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 оно успешно отображает все изображения. Но я получаю окно предупреждения в симуляторе, в котором говорится Warning: Each child in a list should have a unique "key" prop , что я не понимаю. У меня вообще нет компонента списка, я просто перебираю значения карты и показываю изображения. Почему я получаю это предупреждение?

(Предупреждающее сообщение, указывающее на строку кода, в которой я возвращаю <Image> )

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>
  

При создании списка в пользовательском интерфейсе из массива с помощью JSX вы должны добавить ключ prop к каждому дочернему элементу и к любому из его дочерних элементов.

Пример <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>