0

如何为 Flatlist renderItem 添加递增键，它是用于地图的方式：

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

现在我有这样的，但密钥没有出现在 MyComponent 道具中：

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

5 回答 5

1

所以如果我理解你想渲染一个<MyComponent />里面的列表<FlatList />？

const FlatList = ({ data }) => data.map((item, i) => (
  <MyComponent item={item} key={i} />
))
于 2017-07-22T17:48:05.840 回答
1

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

原因是键的概念是在创建组件之前由 React 内部控制的。裁判也是一样。

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

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

如果你正在阅读一个名为 key 的道具，你可能会重载 key 的含义，或者不小心将它用于不相关的东西。

这种变化使概念更加严格。这有助于避免将 props 转移到另一个不应将 key 和 ref 一起带入的组件的错误。它还通过确保 React 内部的类型一致和稳定来提高性能。

如果您确实需要访问它，我建议重命名或复制道具名称作为可能的解决方法。

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

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

renderItem={({ item, index }) => (
  <MyComponent
    data={item}
    indexKeyIdOrWhatever={index}
  />
)}
于 2017-07-22T17:04:04.687 回答
1

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

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

console.log(numbers);

MDN 文档

于 2017-07-22T17:25:08.143 回答
0

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

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

不像道具

<Item key={1} />

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

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

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

于 2017-07-22T22:50:18.647 回答
0 
<FlatList
    data={this.state.data}
    renderItem={({ item, index }) => (
        <MyComponent data={item} />
    )}
    keyExtractor={(item,key) => key}
/>

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

于 2019-06-21T00:12:10.263 回答