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

【问题标题】：Add auto incrementing key prop to Flatlist将自动递增键道具添加到 Flatlist
【发布时间】：2017-07-22 16:52:24
【问题描述】：

如何为 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}
/>

【问题讨论】：

您想要精确的结果吗？
我希望每个项目都有一个名为 key（或其他）的道具，并且值应该是递增的数字 0,1,2,3,4,5...（根据列表项目数）

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

【解决方案1】：

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

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

console.log(numbers);

MDN docs

【讨论】：

【解决方案2】：

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

原因是密钥的概念是在创建组件之前由 React 内部控制。这 refs 也是一样的。

您可以将 ReactElements 数组视为一个 Map。

Map 是一系列键和值元组。 React 片段是一个一系列 key 和 props 元组（以及 type 和 ref）。关键是旨在决定每个插槽中的值是什么，但不是实际的价值本身。

如果你正在阅读一个名为 key 的道具，你可能会重载键的含义或意外将其用于无关的事物。

此更改使概念更加严格。这有助于避免将道具转移到另一个不应该的组件的错误带上钥匙和参考书。它还通过以下方式帮助性能确保 React 内部的类型是一致和稳定的。

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

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

要回答评论，如果您想要的只是索引值，那么只需传递 index 作为 documentation for FlatList for renderItem 中所述的道具：

renderItem={({ item, index }) => (
  <MyComponent
    data={item}
    indexKeyIdOrWhatever={index}
  />
)}

【讨论】：

嘿迈克尔感谢您的回答，这就是我想要实现的目标：我想为每个名为 key（或其他）的项目提供一个道具，并且值应该是递增的数字0,1,2,3,4,5...（根据列表项数）
@nikasv 但是为什么呢？它的目的是什么？如果您只想要索引值，我将在答案中进行编辑，但就目前而言，如果是这种情况，您的问题确实可以通过阅读文档来回答。此外，您应该将这些 cmets 编辑到您的问题中，以使其更加清晰，因为这将有助于以后看到此问题的其他人。

【解决方案3】：

所以如果我理解您想在<FlatList /> 中呈现<MyComponent /> 的列表？

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

【讨论】：

【解决方案4】：

要向 FlatList 添加一个键，你需要在对象中添加它

items = [{key: 1, name: 'name1'}, {key: 2, name: 'name2'}, ... ]

不像是道具

<Item key={1} />

所以基本上this.state.data 将包含 items 数组，每个对象将包含键，然后

<FlatList
  data={this.state.data}
  renderItem={({item}) => <Item name={item.name} />}
  />

您可以通过items.map((item, index)=>{ item.key = index })将密钥添加到对象或者您可以使用 id 或来自 API 的任何其他独特的东西

【讨论】：

【解决方案5】：

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

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

【讨论】：