Question

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

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

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

React Native：无法修复FlatList键警告

1 个答案: