警告：数组或迭代器中的每个子元素应具有唯一的“键”支柱。检查“ListView”的渲染方法 [英] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
问题描述
我使用 ReactNative 构建了一个适用于iOS和Android的应用程序，其中包含的ListView 。当使用有效的数据源填充listview时，屏幕底部会显示以下警告：
警告：数组中的每个子或者迭代器应该有一个唯一的key
prop。检查ListView的渲染方法。
此警告的目的是什么？消息后，他们链接到以下页面： https://fb.me/react-warning-keys ，其中完整讨论不同的事情，与本机反应无关，但与基于Web的respondjs无关。
我的ListView是用这些语句构建的：
render（）{
var store = this.props.store;
return（
< ListView
dataSource = {this.state.dataSource}
renderHeader = {this.renderHeader.bind（this）}
renderRow = {this.renderDetailItem.bind（this）}
renderSeparator = {this.renderSeparator.bind（this）}
style = {styles.listView}
/>
）;
}
我的数据源包含如下内容：
var detailItems = [];
detailItems.push（new DetailItem（'plain'，store.address））;
detailItems.push（new DetailItem（'map'，''））;
if（store.telefon）{
detailItems.push（new DetailItem（'contact'，store.telefon，'Anrufen'，'fontawesome | phone'））;
}
if（store.email）{
detailItems.push（new DetailItem（'contact'，store.email，'Email'，'fontawesome | envelope'））;
}
detailItems.push（new DetailItem（'moreInfo'，''））;
this.setState（{
dataSource：this.state.dataSource.cloneWithRows（detailItems）
}）;
并且ListView-Rows会以如下方式呈现：
return（
< TouchableHighlight underlayColor ='＃dddddd'>
< View style = {styles.infoRow}>
< Icon
name = {item.icon}
size = {30}
color ='gray'
style = {styles.contactIcon}
/> ;
< View style = {{flex：1}}>
< Text style = {styles.headline}> {item.headline}< / Text>
< ; Text style = {styles.details}> {item.text}< / Text>
< / View>
< View style = {styles.separator} />
< / View>
< / TouchableHighlight>
）;
一切正常，正如预期的那样，除了对我来说似乎是完整的废话的警告除外。 p>
在我的DetailItem中添加一个键属性 - 类没有解决问题。
由于cloneWithRows，将真正传递给ListView：
_dataBlob：
I / ReactNativeJS 1293）：{s1：
I / ReactNativeJS（1293）：[{key：2，
I / ReactNativeJS（1293））：type：'plain'，
I / ReactNativeJS（1293） ：文本：'xxxxxxxxxx'，
I / ReactNativeJS（1293）：标题：''，
I / ReactNativeJS（1293）：icon：''}，
I / ReactNativeJS（1293） ：{key：3，type：'map'，text：''，headline：''，icon：''}，
I / ReactNativeJS（1293）：{key：4，
I / ReactNativeJS（1293）：type：'contact'，
I / ReactNativeJS（1293）：text：'（xxxx）yyyyyy'，
I / ReactNativeJS（1293）标题：'Anrufen'，
I / ReactNativeJS（1293）：icon：'fontawesome | phone'}，
I / ReactNativeJS（1293）：{key：5，
I / ReactNativeJS 1293）：type：'contact'，
I / ReactNativeJS（1293）：text：'xxxxxxxxx@hotmail.com'，
I / ReactNativeJS（1293）：标题：'Email'，
I / ReactNativeJS（1293）：icon：'fontawesome | envelope'}，
I / ReactNativeJS（1293）：{key：6，type：'moreInfo'，text：''，headline：''，icon ：''}]}，
如一键所示，每个记录都有一个关键属性。警告仍然存在。
我刚刚同样的问题现在，在看了上面的一些建议后，我终于解决了这个问题。
事实证明（至少对我而言），我需要提供一个键（一个prop称为key）到我从renderSeparator方法返回的组件。添加一个键到我的renderRow或renderSectionHeader没有做任何事情，但添加到renderSeparator使警告消失。
希望有帮助。
I built an app with ReactNative both for iOS and android with a ListView. When populating the listview with a valid datasource, the following warning is printed at the bottom of the screen:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of
ListView.
What is the purpose of this warning? After the message they link to the following page: https://fb.me/react-warning-keys, where complete different things are discussed which have nothing to do with react native, but with web based reactjs.
My ListView is built with those statements:
render() {
var store = this.props.store;
return (
<ListView
dataSource={this.state.dataSource}
renderHeader={this.renderHeader.bind(this)}
renderRow={this.renderDetailItem.bind(this)}
renderSeparator={this.renderSeparator.bind(this)}
style={styles.listView}
/>
);
}
My DataSource consists of something like:
var detailItems = [];
detailItems.push( new DetailItem('plain', store.address) );
detailItems.push( new DetailItem('map', '') );
if(store.telefon) {
detailItems.push( new DetailItem('contact', store.telefon, 'Anrufen', 'fontawesome|phone') );
}
if(store.email) {
detailItems.push( new DetailItem('contact', store.email, 'Email', 'fontawesome|envelope') );
}
detailItems.push( new DetailItem('moreInfo', '') );
this.setState({
dataSource: this.state.dataSource.cloneWithRows(detailItems)
});
And the ListView-Rows are rendered with stuff like:
return (
<TouchableHighlight underlayColor='#dddddd'>
<View style={styles.infoRow}>
<Icon
name={item.icon}
size={30}
color='gray'
style={styles.contactIcon}
/>
<View style={{ flex: 1}}>
<Text style={styles.headline}>{item.headline}</Text>
<Text style={styles.details}>{item.text}</Text>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
Everything works fine and as expected, except the warning which seems to be complete nonsense to me.
Adding a key-property to my "DetailItem"-Class didn't solve the issue.
This is, what really will be passed to the ListView as a result of "cloneWithRows":
_dataBlob:
I/ReactNativeJS( 1293): { s1:
I/ReactNativeJS( 1293): [ { key: 2,
I/ReactNativeJS( 1293): type: 'plain',
I/ReactNativeJS( 1293): text: 'xxxxxxxxxx',
I/ReactNativeJS( 1293): headline: '',
I/ReactNativeJS( 1293): icon: '' },
I/ReactNativeJS( 1293): { key: 3, type: 'map', text: '', headline: '', icon: '' },
I/ReactNativeJS( 1293): { key: 4,
I/ReactNativeJS( 1293): type: 'contact',
I/ReactNativeJS( 1293): text: '(xxxx) yyyyyy',
I/ReactNativeJS( 1293): headline: 'Anrufen',
I/ReactNativeJS( 1293): icon: 'fontawesome|phone' },
I/ReactNativeJS( 1293): { key: 5,
I/ReactNativeJS( 1293): type: 'contact',
I/ReactNativeJS( 1293): text: 'xxxxxxxxx@hotmail.com',
I/ReactNativeJS( 1293): headline: 'Email',
I/ReactNativeJS( 1293): icon: 'fontawesome|envelope' },
I/ReactNativeJS( 1293): { key: 6, type: 'moreInfo', text: '', headline: '', icon: '' } ] },
As one key see, each record has a key property. The warning still exists.
I've had exactly the same problem as you for a while now, and after looking at some of the suggestions above, I finally solved the problem.
It turns out (at least for me anyway), I needed to supply a key (a prop called 'key') to the component I am returning from my renderSeparator method. Adding a key to my renderRow or renderSectionHeader didn't do anything, but adding it to renderSeparator made the warning go away.
Hope that helps.
这篇关于警告：数组或迭代器中的每个子元素应具有唯一的“键”支柱。检查“ListView”的渲染方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
