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和数据来自我的应用程序的另一部分,但我知道doc.id是唯一的)

经过一些谷歌搜索后,我尝试定义一个Key Extractor,如下所示:

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

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

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

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

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)}
/>

Answer 2

我这样做并为我工作：

keyExtractor={(item, index) => 'key'+index}