Reagieren Nativ: Kann nicht FlatList Schlüssel beheben Warnung

Question

Ich versuche, einen FlatList von json von einem api geholt zu machen, aber ich halte diesen Fehler:

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

Relevante Code:

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

Ich bin mir sicher, dass es eine einfache Lösung dafür gibt, aber nach ein paar Tagen des Ausprobierens habe ich es nicht gefunden. Danke für Ihre Hilfe!

Answer 1

Sieht aus wie Sie benötigen key-id zu ändern, wie Sie item.id in keyExtractor zu schreiben und sicherzustellen, dass Sie id haben und es ist anders für jede Komponente:

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

Oder wenn Sie haben nicht eindeutigen Schlüssel verwenden keyExtractor={(item, index) => index}