React-native ListView-Tasten

Question

Ich bekomme eine Warnung auf meiner App, die mich stört. Die Reaktion sagt immer, dass ich für jede Zeile einen Schlüssel hinzufügen muss, aber egal, was ich diese Schlüssel nicht hinzufügen kann.

mein Code sieht wie folgt aus:

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

Ich versuche, den Schlüssel auf meine Komponente wie diese <Card key={rowData.id}/>/ hinzuzufügen und ich habe auch versucht, in meiner Komponente den Schlüssel aus den Requisiten zu bekommen und es in der ersten hinzufügen Element der Komponente auf meinem Fall ist ein TouchbleOpacity

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

Jemand könnte mich einen Hinweis hive? oder sollte ich diese Warnung ignorieren?

Answer 1

Eigentlich renderRow bekommt vier Argumente (rowData, sectionID, rowID, highlightRow), und Sie brauchen die dritte und nicht die zweite.

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

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

Answer 2

Wie in seinem comment von Gabriel Lopes erklärt, ein häufiger Fehler ist, zu vergessen, Schlüssel zu den Separatoren hinzuzufügen.

Also stellen Sie sicher, dass sie hinzugefügt werden. Sie können sie von den an der Trennfunktion übergeben Argumente bauen:

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