Question

如何为Flatlist renderItem添加递增键，方式是map：

.map((data,key) => <Component data={data} key={key}/>

现在我已经这样了，但是关键并没有显示在MyComponent道具中：

<FlatList
    data={this.state.data}
    renderItem={({ item }) => (
        <MyComponent data={item} />
    )}
    keyExtractor={(item,key) => key}
/>

Answer 1

实际上这就是Array#map函数的工作原理。回调函数中的第二个参数代表index，它基本上是一个计数器。它从0开始，这就是你想要的。

＆＃13;

const arr = ['a', 'b', 'c'];
const numbers = arr.map((item, index) => index);

console.log(numbers);

＆＃13;

<强> MDN docs

Answer 2

key没有显示，因为您不应该在组件中访问它。 这是设计使然。请参阅this Github issue，特别是this comment，解释其背后的原因。引用与您的问题相关的最相关部分加粗：

原因是钥匙的概念就是这样   在创建组件之前由React内部控制。该   参考文献也是如此。

您可以将ReactElements数组视为Map。

Map是一系列键和值元组。 React片段是一个   系列的键和道具元组（以及类型和参考）。关键是   旨在决定每个插槽中的值，而不是实际值   重视自己。

如果你正在阅读一个名为密钥的道具，你可能会超载   关键的意思或意外地将其用于不相关的事物。

这一变化使概念更加严格。这有助于避免   将道具转移到另一个不应该的组件的错误   带钥匙和ref随之而来。它还有助于提高性能   确保React内部的类型一致且稳定。

我建议尽可能重命名或复制道具名称   如果你真的需要访问它，请修复。

如果由于某种原因您绝对需要 key道具的价值，那么请编辑您的问题以了解原因。有一些解决方法（参见Github内部的问题），但是为了得到一个好的答案，我们需要了解你究竟想要完成什么。

要回答评论，如果您想要的只是索引值，那么只需将index作为documentation for FlatList renderItem中所述的道具传递给renderItem={({ item, index }) => ( <MyComponent data={item} indexKeyIdOrWhatever={index} /> )}：

{{1}}

Answer 3

因此，如果我了解您要在<MyComponent />内呈现<FlatList />列表？

const FlatList = ({ data }) => data.map((item, i) => (
  <MyComponent item={item} key={i} />
))

Answer 4

向FlatList添加键您需要将其添加到对象

中

<Item key={1} />

不像

这样的道具

this.state.data

所以基本上<FlatList data={this.state.data} renderItem={({item}) => <Item name={item.name} />} />将包含items数组，每个对象将包含key，然后

items.map((item, index)=>{ item.key = index })

您可以通过Router.matchRoute('my/route')将关键字添加到对象或者你可以使用来自API的id或任何其他独特的东西

Answer 5

<FlatList
    data={this.state.data}
    renderItem={({ item, index }) => (
        <MyComponent data={item} />
    )}
    keyExtractor={(item,key) => key}
/>

{ item }已转换为{ item, index }。

将自动递增键道具添加到Flatlist

5 个答案: