arrays - React Native-将keyExtractor与FlatList一起使用

我得到了:

"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是唯一的)

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

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

然后是我的平面 list 定义:

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

仍然收到相同的错误，在这一点上，您还不确定如何处理该错误或它在做什么错。有任何想法吗？非常感谢!

最佳答案

这是警告列表中的元素缺少键。这些独特的键使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)}
/>

关于arrays - React Native-将keyExtractor与FlatList一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47953662/