React Native - 使用带有 FlatList 的 keyExtractor

Question

我得到了：

 "VirtualizedList: missing keys for items, make sure to specify a key property on an item or provide a custom keyExtractor"

相当混乱……，我传递给它的数组在数组中的每个对象中定义了一个键属性。我在 this.state 中定义了该数组。我在控制台中进行了快速打印以确保： 打印出数组

数组中的每个对象定义为：

   var obj = {key: doc.id, value: doc.data()};

（文档和数据来自我应用程序的另一部分，但我知道 doc.id 是唯一的）

经过一番谷歌搜索后，我尝试定义一个密钥提取器，如下所示：

 _keyExtractor = (item, index) => item.key;

然后这是我的平面列表定义：

   <FlatList
        style={{}}
        data={this.state.FeedDataCollection}
        keyExtractor={this._keyExtractor}
        renderItem={(rowData) =>this.RenderFeedCard(rowData)}
      />

仍然收到相同的错误，此时不确定如何处理它或它做错了什么。有任何想法吗？非常感谢！

原文由 jdoej 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

“VirtualizedList：缺少项目的键，请确保在项目上指定键属性或提供自定义 keyExtractor”

这是一个警告，列表中的元素缺少键。这些唯一的键允许 VirtualizedList（这是 FlatList 的基础）跟踪项目，并且在效率方面非常重要。

您必须选择一个唯一的密钥道具，例如 id 或 email 。

keyExtractor index 。但警告将保持可见。

示例： 定义为 {key: doc.id, value: doc.data()} 的对象可以在提取器中用作：

 keyExtractor={(item, index) => item.key}

Flatlist 组件应如下所示：

 <FlatList
  style={{}}
  data={this.state.FeedDataCollection}
  keyExtractor={(item, index) => item.key}
  renderItem={(rowData) =>this.RenderFeedCard(rowData)}
/>

原文由 Sarantis Tofas 发布，翻译遵循 CC BY-SA 4.0 许可协议