最新消息:20190529 VPS服务器已从腾讯云香港换为Vultr新加坡,主题仍用朋友推荐的大前端D8

【已解决】ReactNative警告:each child in an array or iterator should have a unique key prop

React Native crifan 1518浏览 0评论

代码:

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

需要遍历数组去确定每一列,Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `Picker`. · Issue #1238 · ant-design/ant-design-mobile

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>

reactjs – Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `MovieResults` – Stack Overflow

facebook – Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView` – Stack Overflow

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

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
62 queries in 0.088 seconds, using 18.78MB memory