Chiavi ListView native React

Question

Viene visualizzato un avviso sulla mia app che mi infastidisce. la reazione continua a dire che ho bisogno di aggiungere la chiave per ogni riga, ma non importa quello che non posso aggiungere queste chiavi.

mio codice è simile al seguente:

<ListView 
    style={styles.listView} 
    dataSource={this.state.favs} 
    renderSeparator={() => <View style={styles.listSeparator}/>} 
    renderRow={(rowData,i) => <Card data={rowData} 
      onPress={this.onCardPress.bind(this,rowData)} /> } 
/> 

cerco di aggiungere la chiave sul mio componente come questo <Card key={rowData.id}/>/ e ho anche cercato di ottenere la chiave gli oggetti di scena dentro la mia componente e aggiungerlo nella prima elemento del componente sul mio caso è un TouchbleOpacity

<TouchableWithoutFeedback 
     key={this.props.key} 
     style={styles.cardBtn}> 

qualcuno mi potrebbe alveare un suggerimento? o dovrei ignorare questo avvertimento?

Answer 1

In realtà renderRow ottiene quattro argomenti (rowData, sectionID, rowID, highlightRow) e è necessario il terzo e non il secondo.

renderRow={(rowData, sectionID, rowID) => <Card key={rowID} data={rowData} 
      onPress={this.onCardPress.bind(this,rowData)} /> } 

Riferimento: facebook.github.io/react-native/docs/listview.html#renderrow

Answer 2

Come affermato da Gabriel Lopes nel suo comment, un errore comune è quello di dimenticare di aggiungere le chiavi per i separatori.

Quindi assicurarsi che vengano aggiunti. È possibile costruire dagli argomenti passati alla funzione di separazione:

renderSeparator(sectionId, rowId, adjacentRowHighlighted) { 
    return (<View key={`sep:${sectionId}:${rowId}`} />); 
}