React-native ListView 键

IT技术 javascript listview reactjs key react-native
2021-04-13 05:20: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}/>/ ,我还尝试从组件内部的props中获取密钥,并将其添加到我的案例中组件的第一个元素中是一个 TouchbleOpacity

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

有人可以给我一个提示吗?或者我应该忽略这个警告?

2个回答

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

谢谢@Cherniv,愚蠢的错误,我也意识到我需要向 renderSeparator 添加一个键
2021-06-09 05:20:26

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

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

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