React Native:无法修复 FlatList 键警告 [英] React Native: Can't fix FlatList keys warning

问题描述

我正在尝试从从 api 获取的 json 中呈现 FlatList，但我不断收到此错误:

I'm trying to render a FlatList from json fetched from an api, but I keep getting this error:

Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`.

相关代码:

<FlatList
  data={this.props.tunes}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => {
    <Item
      key={item.id}
      title={item.title}
      composer={item.composer}
      year={item.year}
    />
  }}
/>

我确定有一个简单的解决方法，但是在尝试了几天之后，我还没有找到它.感谢您的帮助！

I'm sure there is a simple fix for this, but after a few days of trying different things I haven't found it. Thanks for your help!

推荐答案

看起来你需要在编写 item.id<时将 key 更改为 id/code> 在 keyExtractor 中，并确保您有 id 并且每个组件都不同:

Looks like you need to change key to id as you write item.id in keyExtractor and be sure you have id and it's different for each component:

<FlatList
  data={this.props.tunes}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => {
    <Item
      id={item.id} //instead of key
      title={item.title}
      composer={item.composer}
      year={item.year}
    />
  }}
/>

或者如果您没有唯一键，请使用 keyExtractor={(item, index) =>索引}

Or if you don't have unique key use keyExtractor={(item, index) => index}

这篇关于React Native:无法修复 FlatList 键警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！