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

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

_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 的基础）跟踪项目，并且在效率方面非常重要。

您必须选择一个独特的关键道具，例如 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

@Sarantis Tofas 有正确答案。帮我解决了！基于评论的两个附加说明：

如果您使用索引，请确保使用 index.toString() 否则您会收到不同的警告（失败的子上下文类型 - 提供给 CellRenderer 的类型编号预期字符串).
如果您没有定义键属性或 keyExtractor，默认情况下 FlatList 将使用索引，但它仍会发出警告。

Answer 3

尝试使用 listkey 而不是 keyExtractor，它对我有效

Answer 4

我这样做并为我工作：

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

Answer 5

React Native 的最佳唯一密钥提取器

函数看起来像：

  keyExtractor = item => {
    return item.id.toString() + new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

或没有项目字段：

  keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };

Answer 6

此错误的重要性在于您开始更改或删除数组中的任何对象，因为如果您不提供该键，您的列表将如何更新。

React Native 在没有键的情况下处理列表更改的方式是删除屏幕上可见的所有内容，然后查看新的数据数组并为每个元素呈现一个元素。

我们不希望 React Native 仅仅因为对数据数组的一个小改动就重建整个列表。理想情况下，我们希望 React Native 专门检测我们删除或更改的对象并相应地更新，但如果我们不提供密钥，那将不会发生。

键属性允许 React Native 跟踪这些对象列表，这样它就可以跟踪您正在修改或删除的内容，并仅使用特定键删除该特定元素。

这样列表就不需要从头开始重建。该密钥将允许 React Native 将数据对象的定义与出现在屏幕上的某些元素联系起来。

它只是允许 React Native 跟踪我们渲染到屏幕上的不同对象列表。这也是对我们的列表进行更新的性能优化。

Answer 7

实际上，在我的例子中，FlatList data 属性值不是数组类型（它是空对象）所以当我添加 keyExtractor={(item, index) => item.key} 时它出错了。

希望对你有所帮助

Answer 8

这一定会奏效。先生成随机数。

let generateRandomNum = () => Math.floor(Math.random() * 1001);

然后调用你需要生成随机数的地方。喜欢 :-

{ id: generateRandomNum().toString(), value: 'your value'}

//下面我分享一小部分代码以便更好地理解

const addGoalHandler = enteredInputGoal => {
console.log('random nub', generateRandomNum());
setCourseGoals(courrentGoals => [...courrentGoals, { id: generateRandomNum().toString(), value: enteredInputGoal }]);
  };

最后在 FlatList 中使用

<FlatList keyExtractor={(item, index) => item.id} data={courseGoals} renderItem={itemData =>itemData.item.value } />

Answer 9

keyExtractor={(item, index) => 'key'+index} 为我工作。

Answer 10

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

这对我有用。不需要连接字符串

React Native - 使用带有 FlatList 的 keyExtractor

React Native - Use a keyExtractor with FlatList

arrays

react-native

react-native-flatlist