React Native：FlatList keyExtractor & toString() 问题？答案

【问题标题】：React Native: FlatList keyExtractor & toString() Issue?React Native：FlatList keyExtractor & toString() 问题？
【发布时间】：2018-09-29 13:48:21
【问题描述】：

React-Native 和 FlatLists 的菜鸟问题：

第二行实际上是什么意思？

  data={this.state.data}
  keyExtractor={(x,i)=>i}

我从朋友那里借来了这行代码（在他的许可下），这让我陷入了 react-native 的警告问题。

我不断收到黄色警告，告诉我存在“失败的子上下文类型”。这是“对不起亲爱的程序员，但我找不到关键字段来对您提供给我的数据进行排序！Noob！Pfft！”的本机代码。我明白了。解决方法是在字段中添加 .toString() 表示为 key Field。如您所见，问题在于那里不是关键字段，而是 > (x,i)=>i。

所以我的问题是 WTH 是 (x,i)=>i 吗？

除此之外，我尝试使用我认为是我正在提取的记录的 id 值：this.state.data.id，因为 flatlist 看到该数据源在 this.state.data 中表示，并且正如您已经知道的那样，它将它视为一个数组。我的第二个问题是为什么我不能使用 'this.state.data.id' 作为 keyfield ？

如果我不能使用 this.state.data.id 作为关键字段，并使用 (x,i)=>i 东西（不管那东西是什么），我必须使用它，什么是它以及如何将 .toString() 添加到它？

提前谢谢。

对于 Noob 的问题，我深表歉意。

祝你有美好的一天！

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

(x,i)=>i 实际上是一个回调函数，其中 x=item 和 i=index，因此您将 index 作为键返回。考虑一下：

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

由于它希望 key 是一个字符串，你可以使用：

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

【讨论】：

很好，澄清了事情。而且您的解决方案有效。感谢@angelos_lex 的澄清！
所以我有一个问题：这不也应该有效吗？ keyExtractor={(x,i)=>i.toString()} ？但相反，我的应用会引发错误。
好的，现在它没有抛出错误。 :-) 至少有一件事在起作用。

【解决方案2】：

显然您已经知道 key 属性的用途，所以我不会在它上面投入太多时间。（如有疑问check the docs）。

所以让我们分部分回答。 (x, i) => i 是 ES6 lambda function。 keyExtractor 是一个函数，它接收来自数据的项目作为第一个参数（在此回调中称为 x），第二个参数是数据数组中的元素索引（在本例中称为 i）。所以代码说“将数组中的索引用作我的元素的键”。

keyExtractor 是必需的，因为FlatList 封装了您的renderItem 的返回值，并且列表需要key。（如果你愿意，我可以在这里更深入）。

请注意，keyExtractor 为每个元素而不是列表本身提供键，因此使用 this.state.data.id 会将相同的键放在所有元素中，这不是您想要的。

最后.toString()部分只是因为FlatList期望的键类型是字符串，所以警告。

【讨论】：