反应本机列表视图键

React-native ListView keys

本文关键字：视图 列表 本机      更新时间：2023-09-26

我的应用程序收到一个困扰我的警告。 React 一直说我需要为每一行添加键，但无论如何我都无法添加这些键。

我的代码如下所示：

 <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}/>/ 我还尝试从组件内的道具中获取密钥，并将其添加到组件的第一个元素中，在我的案例中是 TouchbleOpacity

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

有人可以给我一个提示吗？ 还是我应该忽略此警告？

实际上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

正如Gabriel Lopes在他的评论中所说，一个常见的错误是忘记向分隔符添加键。

因此，请确保已添加它们。您可以从传递给分隔符函数的参数构建它们：

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