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

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

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

PS-对此部分的回答“被卡在具有没有真实唯一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澄清

2 个答案: