React Native-将keyExtractor与FlatList一起使用 [英] React Native - Use a keyExtractor with FlatList

问题描述

我得到了:

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

非常令人困惑...，我正在传递的数组具有在数组中每个对象中定义的键属性.我在this.state中定义了该数组.我在控制台中进行了快速打印，以确保: 打印出数组

pretty confusing..., the array i am passing it has a key property defined in each object in the array. I have that array defined in this.state. I ran a quick print out in the console to be sure: print out of array

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

Each object in array is defined as:

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

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

(doc and data being from another part of my app, but I know doc.id is unique)

经过一番谷歌搜索之后，我试图像这样定义一个键提取器:

After some googling I then tried to define a Key Extractor like so:

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

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

and then here is my flatlist definition:

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

仍然收到相同的错误，目前还不确定如何处理此错误或它在做什么错.有任何想法吗?非常感谢！

Still receiving the same error, at this point not really sure how to handle this or what it is doing wrong. Any Ideas? Thanks so much!

推荐答案

"VirtualizedList:缺少项的密钥，请确保指定密钥 属性或提供自定义keyExtractor"

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

这是警告列表中的元素缺少键.这些独特的键使VirtualizedList(这是FlatList的构建基础)可以跟踪项目，并且在效率方面确实很重要.

This is a warning that the elements of the list are missing keys. These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items and are really important in terms of efficiency.

您将必须选择唯一的键道具，例如id或email.

You will have to choose a unique key prop, like an id or an email.

默认情况下，keyExtractor退回到使用index的状态.但是警告仍然可见.

The keyExtractor falls back to using the index by default. But the warning will remain visible.

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

Example : an object defined as {key: doc.id, value: doc.data()} can be used in the extractor as:

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

Flatlist组件应如下所示:

Flatlist component should look like that:

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

这篇关于React Native-将keyExtractor与FlatList一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！