React Native Flatlist keyExtractor Разъяснение - PullRequest
Новая
       15

React Native Flatlist keyExtractor Разъяснение

0 голосов
/ 05 ноября 2018

Я немного новичок в React Native и пытаюсь понять несколько концепций одновременно, но застрял в плоском списке, в котором есть данные без истинного уникального идентификатора. Лучшее, что я мог сделать, - это индекс, но все говорят, что не следует использовать индекс.

На данный момент это мой плоский список: 

<FlatList
        data={property.Shipment.Comments}
        keyExtractor={(item, index) => item.key}
        renderItem={({item}) =>
          <View style={styles.flatview}>
            <Text style={styles.ac}>{item.ActivityCode}</Text>
            <Text style={styles.s}>{item.StatusComment}</Text>
          </View>
          }
      />

Это после извлечения моих данных из этого массива: 

"Comments":[
               {
                  "ActivityCode":null,
                  "StatusComment":"10/05/2018 08:20 AM Pickup Request Received.",
                  "StatusDateTime":"2018-10-05T08:20:00",
                  "Status":null,
                  "Reason":null
               },
               {
                  "ActivityCode":"PU",
                  "StatusComment":"10/05/2018 10:09 AM Shipment was picked up",
                  "StatusDateTime":"2018-10-05T10:09:00",
                  "Status":null,
                  "Reason":null
               },
               {
                  "ActivityCode":"ARQ",
                  "StatusComment":"10/05/2018 05:14 PM Appointment Pending",
                  "StatusDateTime":"2018-10-05T17:14:00",
                  "Status":null,
                  "Reason":null
               },
               {
                  "ActivityCode":"CLO",
                  "StatusComment":"10/05/2018 08:22 PM Trailer Closed - ready for dispatch",
                  "StatusDateTime":"2018-10-05T20:22:00",
                  "Status":null,
                  "Reason":null
               },
               {
                  "ActivityCode":"DSP",
                  "StatusComment":"10/06/2018 08:45 AM Trailer dispatched from BOLINGBROOK, IL to DENVER, CO.",
                  "StatusDateTime":"2018-10-06T08:45:00",
                  "Status":"L1",
                  "Reason":"NS"
               },
               {
                  "ActivityCode":"ARV",
                  "StatusComment":"10/08/2018 02:00 PM Trailer arrived at terminal in DENVER, CO",
                  "StatusDateTime":"2018-10-08T14:00:00",
                  "Status":"O1",
                  "Reason":"NS"
               },
               {
                  "ActivityCode":"UNL",
                  "StatusComment":"10/09/2018 09:00 AM Trailer unloaded at terminal in DENVER, CO",
                  "StatusDateTime":"2018-10-09T09:00:00",
                  "Status":null,
                  "Reason":null
               },
               {
                  "ActivityCode":"OFD",
                  "StatusComment":"10/12/2018 06:00 AM Shipment out for delivery",
                  "StatusDateTime":"2018-10-12T06:00:00",
                  "Status":"OD",
                  "Reason":"NS"
               },
               {
                  "ActivityCode":"DEL",
                  "StatusComment":"10/12/2018 12:00 PM Shipment delivered to consignee",
                  "StatusDateTime":"2018-10-12T12:00:00",
                  "Status":"D1",
                  "Reason":"NS"
               }
            ],

Есть ли подходящий способ использования keyExtractor с вышеуказанными данными? В моем случае я не уверен, насколько это важно, так как список только для просмотра. На самом деле эти тестовые данные, с которыми я работаю, основаны на моем более старом проекте, в котором вообще не было никаких манипуляций с данными.

Спасибо за помощь!

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

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

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

Пример может выглядеть так: 

import shortid from 'shortid'

// Get API data
const data = await myAPICall();

const comments = data.map(a => ({
  ...a,
  id: shortid.generate()
}))

this.setState({
  comments
})
0 голосов
/ 05 ноября 2018

Во-первых, давайте разберемся, что такое КЛЮЧ в реакции. React использует ключ для уникальной идентификации компонентов, а при повторном рендеринге реагирует на эти ключи, чтобы понять, какую часть пользовательского интерфейса следует обновить. Таким образом, ключи полезны, когда вы работаете с динамически создаваемыми компонентами или когда ваши списки изменяются пользователями. В плоском списке KEYEXTRACTOR определяет только ключ реакции.

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

PS - Ответьте на эту часть «я застрял в плоском списке, в котором есть данные без истинного уникального идентификатора». Мы всегда можем создать уникальные идентификаторы во внешнем интерфейсе и назначить их в качестве ключа, если это необходимо. (В случае, если данные / ответ API не имеют уникального ключа.

...