arrays - 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 中定义了该数组。我在控制台中快速打印出来以确保:
print out of array

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

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

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

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

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

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

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

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

Answer 1

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

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

您必须选择一个唯一的键 Prop ，例如 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)}
/>