Использование KeyExtractor в FlatList React Native
6 апреля 2022 г.В React Native [компонент FlatList] (https://reactnative.dev/docs/flatlist) хорошо работает для отображения длинного списка данных. Он отображает только те элементы, которые отображаются на экране в прокручиваемом списке, а не все элементы данных одновременно.
Чтобы отобразить прокручиваемый список элементов с помощью FlatList, вам нужно передать компоненту требуемый реквизит data. Свойство data принимает массив элементов. Каждый элемент массива представляет собой один элемент списка. Другая необходимая поддержка — это renderItem, которая берет элемент из data и отображает его в списке. Это свойство принимает функцию, которая возвращает JSX для рендеринга.
Чтобы отобразить элемент в прокручиваемом списке, компонент FlatList требует, чтобы каждый элемент имел уникальный ключ, например идентификатор. Этот ключ позволяет компоненту FlatList (поскольку он использует VirtualizedList под капотом) отслеживать порядок элементов в списке. Ключ из массива данных извлекается с помощью свойства keyExtractor в компоненте FlatList.
В этом посте поговорим о том, где вам может понадобиться использовать keyExtractor и в каких сценариях это не требуется.
Отображение списка элементов с помощью FlatList
Рассмотрим следующую структуру данных. В массиве десять элементов, и каждый элемент имеет два свойства: id и title. «id» — это уникальный ключ для каждого элемента.
```javascript
константа DATA_WITH_ID = [
идентификатор: 1,
title: 'quidem molestiae enim'
идентификатор: 2,
title: «Солнце, за исключением места вины»
идентификатор: 3,
title: 'omnis Laborum odio'
идентификатор: 4,
title: 'non esse culpa molestiae omnis sed optio'
идентификатор: 5,
title: 'eaque aut omnis a'
идентификатор: 6,
title: 'natus impedit quibusdam illo est'
идентификатор: 7,
title: 'quibusdam autem aliquid et et quia'
идентификатор: 8,
title: 'qui fuga est a eum'
идентификатор: 9,
title: 'saepe unde necessitatibus rem'
идентификатор: 10,
название: 'distincio Laborum Qui'
Используя компонент «FlatList», вы хотите отобразить «заголовок» каждого элемента, как показано ниже:
```javascript
функция экспорта по умолчанию App() {
const renderList = ({элемент}) => {
вернуть (
<Вид стиля={styles.listItem}>
вернуть (
<Вид стиля={styles.container}>
В результате вышеуказанного компонента будет отображаться список элементов без каких-либо ошибок или предупреждений. Кроме того, компонент FlatList не требует уникального ключа для идентификации каждого элемента, поскольку исходная структура данных уже содержит ключ с именем id.
Вот вывод на экране устройства из приведенного выше фрагмента:
Использование свойства keyExtractor
По умолчанию свойство keyExtractor проверяет такие свойства, как key и id (именно в таком порядке). Если какой-либо из двух присутствует в исходной структуре данных, он будет считаться уникальным ключом компонентом FlatList. В этом случае (как и в предыдущем примере) вам не нужно явно использовать свойство keyExtractor.
Если ни один из них не указан, компонент FlatList выдаст предупреждение "VirtualizedList: отсутствуют ключи для элементов...":
Теперь давайте рассмотрим сценарий, в котором массив данных содержит уникальный ключ для каждого элемента списка, но имя уникального ключа не является ни key, ни id. Он содержит уникальное ключевое свойство с именем userId.
```javascript
константа DATA_WITH_USER_ID = [
идентификатор пользователя: 1,
title: 'quidem molestiae enim'
идентификатор пользователя: 2,
title: «Солнце, за исключением места вины»
идентификатор пользователя: 3,
title: 'omnis Laborum odio'
идентификатор пользователя: 4,
title: 'non esse culpa molestiae omnis sed optio'
идентификатор пользователя: 5,
title: 'eaque aut omnis a'
идентификатор пользователя: 6,
title: 'natus impedit quibusdam illo est'
идентификатор пользователя: 7,
title: 'quibusdam autem aliquid et et quia'
идентификатор пользователя: 8,
title: 'qui fuga est a eum'
идентификатор пользователя: 9,
title: 'saepe unde necessitatibus rem'
идентификатор пользователя: 10,
название: 'distincio Laborum Qui'
При рендеринге списка вы увидите предупреждение в этом случае, потому что компонент FlatList не распознает userId как имя ключа или идентификатора в исходной структуре данных.
Для пользовательских имен ключей, таких как userId в приведенном выше примере, используется свойство keyExtractor. Он извлекает уникальное имя ключа и его значение и сообщает компоненту FlatList отслеживать элементы на основе этого значения.
Для приведенного выше массива данных измените компонент FlatList и используйте свойство keyExtractor для извлечения ключа:
```javascript
<Плоский список
данные = {DATA_WITH_ID}
renderItem={списокрендеринга}
keyExtractor={item => item.userId}
Предупреждение также исчезнет после этого шага.
Заключение
При использовании компонента FlatList, если массив данных имеет уникальный id или свойство key, вам не нужно явно использовать свойство keyExtractor. Однако для пользовательских имен идентификаторов используйте свойство keyExtractor, чтобы явно указать компоненту, какой уникальный ключ следует извлечь.
Если вы хотите узнать больше о React Native, посетите категорию React Native и категорию Expo страницы в моем блоге. Вы также можете подписаться на мою новостную рассылку или следить за мной в Twitter, чтобы получать обновления всякий раз, когда я публикую новую статья или учебник.
Также опубликовано [Здесь] (https://amanhimself.dev/blog/use-key-extractor-in-react-native-flatlist/)
Оригинал