uniapp APP端运行报错 cid unmatched at view.umd.min.js:1

本文主要是介绍uniapp APP端运行报错 cid unmatched at view.umd.min.js:1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近写的一个IM即时通讯系统差不多算是完善了，在h5端调试着一般都没有什么很难搞的bug。然而就在昨天，将项目运行到模拟器时聊天界面获取历史记录消息并渲染在页面上时，却报了一堆很奇怪的错误

cid unmatched at view.umd.min.js:1
TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method. at view.umd.min.js:1

当你在APP端运行时，如果出现这种报错信息，而在h5端又是正常的，这说明你的代码在使用对象属性时用到了一些未定义的属性，或者是属性值为null的。

出现错误的代码是在一个v-for循环中使用了我自定义的一个消息组件，用于显示消息页面的消息框，其中组件向外暴露了一个type属性，type的类型是boolean，在组件中用v-if,v-else来控制消息框居左还是居右，具体组件代码如下:

<template>  <view>  <view v-if="type">  <view class="message message-right">  <view class="message-right-status">  <u-loading-icon v-if="status === 'sending'" size="16"></u-loading-icon>  <u-icon v-if="status === 'fail'" name="error-circle-fill" size="16" color="#fa3534"></u-icon>  </view>  <view class="content content-right">  {{content}}  </view>  <view style="height: 80rpx;padding-right: 16rpx;">  <u-avatar v-if="avatar" :src="avatar"></u-avatar>  <u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>  </view>  </view>  </view>  <view v-else>  <view class="message message-left">  <view style="height: 80rpx;padding-left: 16rpx;">  <u-avatar v-if="avatar" :src="avatar"></u-avatar>  <u-avatar v-else :text="nickname.charAt(0)" randomBgColor></u-avatar>  </view>  <view class="content content-left">  {{content}}  </view>  </view>  </view>  </view>  
</template>  <script>  export default {  data() {  return {  }  },  props:{  //true时消息在右侧，即发送的消息，false时消息在左侧，即接收的消息  type:{  type: [Boolean],  default: false  },  nickname:{  type: [String,Number],  default: '私聊者昵称'  },  avatar:{  type: [String],  default: "/static/common/logo.png"  },  content:{  type: [String],  default: "消息内容"  },  status:{  type: [String],  default: 'none'  }  },  methods: {  }  }  
</script>  <style>  .message-time{  text-align: center;  color: #959595;  font-size: 26rpx;  }  .message{  width: 100%;  display: flex;  }  .message-left{  justify-content: flex-start;  }  .message-right{  justify-content: flex-end;  }  .message-right-status{  display: flex;  align-items: flex-end;  padding-right: 16rpx;  }  .content{  max-width: 70%;  min-width: 7%;  margin-top: 40rpx;  word-wrap:break-word;  word-break:break-all;  padding: 14rpx 10rpx 14rpx 18rpx;  border-radius: 20rpx;  font-size: 32rpx;  min-height: 40rpx;  }  .content-left{  margin-left: 4rpx;  background-color: #FFFFFF;  color: #000000;  }  .content-right{  margin-right: 8rpx;  background-color: #3c9cff;  color: #FFFFFF;  }  
</style>

在网上找的帖子都说这种报错是因为使用的对象属性不存在，或是给组件传值时传的值是null等等。

为此我将组件的属性的默认值都设置为有意义的字符串（除了type属性外，因为他的类型是boolean），一开始将组件的传值全部取掉，运行页面，获取历史记录，页面都是正常的，之后我就将要给组件传值的属性一一测试，最后发现其他属性都不会引起上述报错，唯独type属性，后来我把type属性的类型改成string,number等发现均会引起报错，最后不得已，将这个消息组件拆成了两个组件，一个居左，一个居右。

不给组件传type值用于区分左右消息框，而是直接将原始组件拆分成两个。

未拆分前组件传值是这样的:

<scroll-view :style="{height: height+'px'}" :scroll-into-view="scrollIndex" scroll-y><view class="message-time" style="padding-top: 20rpx;">{{allHistoryLoaded ? '没有更多的历史消息' : '下拉获取历史消息'}}</view><view v-for="(item,index) in messages" :key="index" style="padding-top: 20rpx;" :id="`msg-${index+1}`"></view><my-msg :type="item.senderMid == selfObj.memberId":avatar="item.senderMid == selfObj.memberId?selfObj.avatar:friendObj.avatar":nickname="item.senderMid == selfObj.memberId?selfObj.nickname:friendObj.nickname":content="item.content":status="item.status"></my-msg></view>
</scroll-view>

代码去除了一些无关紧要的事件绑定，这样直接传值type用于区分消息框的位置会导致报错，后改成两个组件后：

<scroll-view :style="{height: height+'px'}" :scroll-into-view="scrollIndex" scroll-y><view class="message-time" style="padding-top: 20rpx;">{{allHistoryLoaded ? '没有更多的历史消息' : '下拉获取历史消息'}}</view><view v-for="(item,index) in messages" :key="index" style="padding-top: 20rpx;" :id="`msg-${index+1}`"><view v-if="item.senderMid == selfObj.memberId"><my-msg-right :content="item.content" :status="item.status ? item.status: 'none'" :nickname="selfObj.nickname" :avatar="selfObj.avatar"></my-msg-right></view><view v-else><my-msg-left :content="item.content" :nickname="friendObj.nickname" :avatar="friendObj.avatar"></my-msg-left></view></view>
</scroll-view>