React Native Flatlist keyExtractor 说明

Question

我对 React Native 有点陌生，我试图一次掌握几个概念，但我被困在一个平面列表中，该列表中的数据没有真正的唯一 ID。我能做的最好是一个索引，但每个人都说不要使用索引。

目前这是我的平面列表：

<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 与上述数据一起使用？就我而言，我不确定它有多重要，因为列表只能查看。事实上，我正在使用的这个测试数据是基于我的一个旧项目，那里根本没有数据操作。

感谢您的帮助！

Answer 1

首先，让我们了解一下React中的KEY是什么。 React 使用 key 来唯一标识组件，并且在重新渲染时，React 使用这些 key 来了解应该更新 UI 的哪一部分。因此，当您使用动态创建的组件或当您的列表被用户更改时，键很有用。在平面列表中，KEYEXTRACTOR 仅定义反应键。

据我了解，如果您有只读数据并且不创建动态组件，则键不是很有用，因此您可以使用索引作为键。

PS - 这部分的答案 "am stuck on a flatlist that has data without a true unique id"。如果需要，我们始终可以在前端创建唯一 ID 并将它们分配为键。（如果 API 数据/响应没有任何唯一键。

Answer 2

FlatList 的所有数据集都应该有一个唯一的键来标识每个项目。这样 FlatList 就可以在您滚动时有效地为您的行使用虚拟化。

在您的情况下，获取密钥的最简单方法是在从 API 获取数据时生成密钥。您可以使用像 shortid 这样的包来生成唯一的 ID。

示例可能如下所示：

import shortid from 'shortid'

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

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

this.setState({
  comments
})

React Native Flatlist keyExtractor 说明

React Native Flatlist keyExtractor Clarification

react-native

react-native-flatlist