React-native ListView鍵

Question

我在我的應用程序上收到了一個警告我的警告。 反應一直說我需要為每一行添加密鑰，但無論我不能添加這些密鑰。

我的代碼看起來像這樣：

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

我嘗試在我的組件上添加密鑰，如<Card key={rowData.id}/>/ ，我也嘗試從組件中的props中獲取密鑰，並將其添加到我的案例中組件的第一個元素中是一個TouchbleOpacity

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

有人可以給我一個提示嗎？ 或者我應該忽略這個警告？

Answer 1

實際上renderRow有四個參數(rowData, sectionID, rowID, highlightRow) ，你需要第三個而不是第二個。

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

參考： facebook.github.io/react-native/docs/listview.html#renderrow

Answer 2

正如Gabriel Lopes在評論中所說，一個常見的錯誤是忘記向分隔符添加鍵。

因此，請確保添加它們。 您可以從傳遞給分隔符函數的參數構建它們：

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