代码：
orderItems: [ { “actionName”: “allorder”, “itemIcon”: icons.allorders, “itemTitle”: “全部订单”, “itemContent”: “” }, { “actionName”: “waitsend”, “itemIcon”: icons.pendingdelivery, “itemTitle”: “待配送”, “itemContent”: “” }, { “actionName”: “waittakebyself”, “itemIcon”: icons.waitingforpickup, “itemTitle”: “待自提”, “itemContent”: “” }, { “actionName”: “waitevaluation”, “itemIcon”: icons.waitingforcomment, “itemTitle”: “待评价”, “itemContent”: “” } ] <ScrollView style={styles.container}> <View style={styles.headerView}> <Image style={styles.headImg}/> <Text style={styles.headPhone}>18806171210</Text> </View> <View style={styles.balanceContainerView}> <View style={styles.balanceView}> {this.state.balanceItems.map((item, i)=><ItmeView item={item} itemClick={this.itemClick}/>)} </View> </View> <View style={styles.balanceContainerView}> <View style={styles.balanceView}> {this.state.orderItems.map((item, i)=><ItmeView key={i} item={item} itemClick={this.itemClick}/>)} </View> </View> <View style={styles.featureContainerView}> <View></View> <View></View> </View> </ScrollView> class ItmeView extends Component { constructor(props) { super(props); } ppp(){ if (this.props.item.itemIcon.length !== 0) { return <Image style={styles.balanceItemContentImage} source={this.props.item.itemIcon} /> } else { return <Text style={styles.balanceItemContentText}>{this.props.item.itemContent}</Text> } } render(){ return( <TouchableOpacity onPress={()=>{ if (this.props.itemClick) { this.props.itemClick(this.props.item); } }}> <View style={styles.balanceItemView}> {this.ppp()} <Text style={styles.balanceItemTitleText}>{this.props.item.itemTitle}</Text> </View> </TouchableOpacity> ); } } |
警告：
each child in an array or iterator should have a unique key prop
check the render method of Mine
in ItmeView
react报错Each child in an array or iterator should。。？ – 知乎
<ListItem key={node.imageUrl} imgUrl={ node.imgUrl } title={ node.title } desc={ node.desc } onClick={ redirect }></ListItem> |
javascript – Understanding unique keys for array children in React.js – Stack Overflow
【总结】
原因：
ReactNative在底层实现diff算法，计算要更新哪部分内容的时候，对于list等内容需要一个唯一的值，且Component的属性必须是key。
而这个可以的选择，对于list来说，一般可以用index。
如果有其他更好的，确保不会重复的值，比如该list中元素都有个类似于uuid的值，那么用uuid，也是很好的选择。
办法：
把：
<ItmeView item={item} itemClick={this.itemClick}/> |
改为：
<ItmeView key={i} item={item} itemClick={this.itemClick}/> |
即可。
其中key={i}中的i，是map时候的index，是list的索引值，是确保唯一的，可以被用于key。
转载请注明：在路上 » 【已解决】ReactNative警告：each child in an array or iterator should have a unique key prop