Использование KeyExtractor в FlatList React Native
javascript-development react javascript-tutorial learn-javascript react-native understanding-javascript react-native's-flatlist keyextractor-in-react-native

Использование 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}>


{item.title}



вернуть (


<Вид стиля={styles.container}>




В результате вышеуказанного компонента будет отображаться список элементов без каких-либо ошибок или предупреждений. Кроме того, компонент FlatList не требует уникального ключа для идентификации каждого элемента, поскольку исходная структура данных уже содержит ключ с именем id.


Вот вывод на экране устройства из приведенного выше фрагмента:


ss2


Использование свойства keyExtractor


По умолчанию свойство keyExtractor проверяет такие свойства, как key и id (именно в таком порядке). Если какой-либо из двух присутствует в исходной структуре данных, он будет считаться уникальным ключом компонентом FlatList. В этом случае (как и в предыдущем примере) вам не нужно явно использовать свойство keyExtractor.


Если ни один из них не указан, компонент FlatList выдаст предупреждение "VirtualizedList: отсутствуют ключи для элементов...":


ss1


Теперь давайте рассмотрим сценарий, в котором массив данных содержит уникальный ключ для каждого элемента списка, но имя уникального ключа не является ни 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/)


Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE