react-native - 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 的哪些部分应该更新。因此，当您使用动态创建的组件或当用户更改列表时，键非常有用。在flatlist中，KEYEXTRACTOR仅定义react key。

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

PS - 对这一部分的回答“我被困在一个包含没有真正唯一 ID 的数据的平面列表上”。如果需要，我们始终可以在前端创建唯一的 ID 并将其分配为键。 (以防万一，API 数据/响应没有任何唯一 key 。