Question

关于React-Native和FlatList的Noob问题：

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

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

我从朋友那里借了这行代码（在他的允许下），这有点使我陷入了一个带有本机响应的警告问题。

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

所以我的问题是WTH是（x，i）=> i吗？

除非另有说明，否则我尝试使用我认为是要提取的记录的id值：this.state.data.id，因为列表列表将数据源表示为this.state.data，并且正如您所知，它将其视为一个数组。我的第二个问题是为什么我不能使用'this.state.data.id'作为关键字段？

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

提前谢谢。

我很抱歉Noob问题。

祝您愉快

Answer 1

（x，i）=> i实际上是一个回调函数，其中x = item和i = index，因此您将index作为键返回。像这样考虑：

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

由于它希望键为字符串，因此可以使用：

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

Answer 2

显然，您已经知道key道具的用途，因此我不会在它上花费太多时间。（如有疑问，check the docs）。

所以让我们分部分回答。 (x, i) => i是ES6 lambda function。 keyExtractor是一个函数，它从数据中接收项作为第一个参数（在此回调中称为x），第二个参数是数据数组中的元素索引（在这种情况下称为{{ 1}}）。因此，代码说“将数组中的索引用作我的元素的键”。

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

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

最后，this.state.data.id部分只是因为.toString()期望的键类型是字符串，所以发出了警告。

React Native：FlatList keyExtractor和toString（）问题？

2 个答案: