предупреждение при использовании keyextarctor с FlatList в React Native

07.05.2021Рубрика: ВопросыАвтор: admin

Я новичок в React Native и слежу за учебником. Я использую FlatList для рендеринга компонентов. Это моя составляющая:

const HomeScreen = (props) => {
  console.log("articles: ", props.articles);
  return (
    <View>
        <FlatList
          data={ props.articles }
          renderItem={({item}) => <Text> {item.title}</Text>}
        />
    </View>
  );
}

В руководстве упоминается, что если мы не используем KeyExtarctor, FlatList выдаст это предупреждение.

VirtualizedList: отсутствуют ключи для элементов, обязательно укажите свойство ключа для каждого элемента или укажите настраиваемый keyExtractor.

Я не вижу подобных предупреждений. Учебник довольно старый, поэтому мне было интересно, сохраняется ли эта проблема с последней версией React Native?

Отвечает ли это на ваш вопрос? Базовый код FlatList выдает предупреждение — React Native — person nimramubashir schedule 07.05.2021

Нет, это не так. По этому вопросу я должен получить предупреждение. Но я ничего не получаю. Мой вопрос: почему я не получаю предупреждения, когда мне нужно? @Abhi — person nimramubashir schedule 08.05.2021

Post Views: 92

См. также: Angular 11 Выпадающий выбор по значению внутри таблицы html при загрузке страницы не удалось

1 react-native react-native-flatlist reactjs

Комментарии: 1

nimramubashir 07.05.2021 в 00:00
```
<FlatList
    data={ props.articles }
    keyExtractor={(item) => item.id.toString()} // it is implemented like this
    renderItem={({item}) => <Text> {item.title}</Text>}
/>
```
Элементы массива props.articles должны иметь key или уникальное свойство, чтобы назначить его ключу.

keyExtractor требуется, чтобы избежать воссоздания списка путем отслеживания переупорядочения элементов.

ВАЖНАЯ ИНФОРМАЦИЯ

React всегда использует уникальный ключ для отслеживания обновлений в компоненте. По умолчанию FlatList ищет либо настраиваемую реализацию keyExtractor, либо поле с именем key в элементе данных, в противном случае он использует array index в качестве значения ключа. Идентификатор — это уникальное значение в ответе, которое можно использовать для реализации keyExtractor.
Ответить

Добавить комментарий