reactjs – React Native：无法修复FlatList键警告

发布时间：2020-12-15 16:21:12 所属栏目：百科来源：网络整理

导读：我正在尝试从api中提取json的FlatList,但是我一直收到这个错误： 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

我正在尝试从api中提取json的FlatList,但是我一直收到这个错误：

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}
    />
  }}
/>

我确定有一个简单的解决办法,但经过几天尝试不同的事情,我还没有找到它.谢谢你的帮助！

解决方法

看起来你需要在keyExtractor中编写item.id时将密钥更改为id,并确保你有id并且每个组件的ID都不同：

<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)=>指数}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!