反应原生 ListView 键答案

【问题标题】：React-native ListView keys反应原生 ListView 键
【发布时间】：2016-05-15 15:31:04
【问题描述】：

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

我的代码如下所示：

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

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

【问题讨论】：

标签： javascript listview reactjs key react-native

【解决方案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

【讨论】：

感谢@Cherniv，愚蠢的错误，我也意识到我需要在 renderSeparator 中添加一个键

【解决方案2】：

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

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

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

【讨论】：