React-native ListView keys

问题:

I'm getting a warning on my app that bothers me. the react keeps saying that I need to add key for each row, but no matter what I cannot add these keys.

my code looks like this:

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

I try to add the key on my component like this <Card key={rowData.id}/>/ and I also tried to get the key from the props inside my component and add it in the first element of the component on my case is a TouchbleOpacity

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

Someone could hive me a hint? or should I should ignore this warning?

回答1:

Actually renderRow gets four arguments (rowData, sectionID, rowID, highlightRow) , and you need the third and not the second one.

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

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

回答2:

As stated by Gabriel Lopes in his comment, a common mistake is to forget to add keys to the separators.

So make sure they are added. You can build them from the arguments passed to the separator function:

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