При переборе карты для отображения всех изображений я получаю предупреждение: каждый дочерний элемент в списке должен иметь уникальную ключевую опору.

У меня есть структура данных 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-native react-native-ios react-native-android react-native-image
person Leem.fin    schedule 18.11.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

<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>
person jbg    schedule 18.11.2020

arrow_upward
0
arrow_downward

При создании списка в пользовательском интерфейсе из массива с помощью JSX вы должны добавить key 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>

person Erhan Biçer    schedule 18.11.2020