React Native：FlatList keyExtractor 和 toString() 问题？

Question

关于 React-Native 和 FlatLists 的菜鸟问题：

第二行到底是什么意思？

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

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

我不断收到黄色警告，告诉我有 "failed child context type"。这是 "I'm sorry dear programmer, but I can't find the key field to sort the data you presented me with! Noob! Pfft!" 的反应本机代码。我明白了。解决它的方法是将 .toString() 添加到表示为关键字段的字段。如您所见，问题是那不是关键字段，而是 > (x,i)=>i.

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

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

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

提前致谢。

对于菜鸟问题，我深表歉意。

祝你有美好的一天！

Answer 1

(x,i)=>i 实际上是一个回调函数，其中 x=item 和 i=index，所以你 return 索引作为键。考虑一下：

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

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

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

Answer 2

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

所以让我们分部分回答。 (x, i) => i 是一个 ES6 lambda function。 keyExtractor 是一个函数，它从数据中接收项目作为第一个参数（在此回调中称为 x），第二个参数是数据数组中的元素索引（在本例中称为 i).所以代码说 "use as key for my element the index in the array".

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

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

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

React Native：FlatList keyExtractor 和 toString() 问题？

React Native: FlatList keyExtractor & toString() Issue?

reactjs

react-native

react-native-flatlist