React Native：无法修复 FlatList 键警告

IT技术 reactjs react-native react-native-flatlist
2021-05-17 12:52:32

我正在尝试从从 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}
    />
  }}
/>

我确信对此有一个简单的解决方法，但是在尝试了几天不同的事情后，我还没有找到它。谢谢你的帮助！

1个回答

像你看上去需要改变key对id你写item.id的keyExtractor，并确保你有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) => index}

其它你可能感兴趣的问题
上一篇关于 PETG 的回缩距离和穿线/印刷质量的问题 下一篇ES6 React - 引用、浅拷贝和深拷贝之间有什么区别以及如何比较它们？