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>

在需要传值的组件外部包一个view并且通过v-if来实现原来要的效果，这般操作下来，发现没有报错了，查看了uniapp官方对于v3编译器的支持发现，其对v-if,v-else是支持的，但是我遇到的情况却是不支持的，也不知道是为什么，也可能是我用的不规范，但好歹最后把问题解决了。

如果你也在uniapp的APP端测试遇到了cid unmatched at view.umd.min.js:1的报错，可以先检查使用的对象属性是否存在，再看看传过去的值是否会是null，如果是组件传值建议花点时间对每个属性一一测试。

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

uni-app报错 cid unmatched at view.umd.min.js:1解决方案
uni-app报错 cid unmatched at view.umd.min.js 在去年(2019)做了一个uni-app的应用给企业,结果今年(2020)年的时候需求方需要迁移服务器,需要把ap ...
uniapp使用插件小程序正常 app报错cid unmatched at view.umd.min.js:1
app报错并且uni-swipe-action滑动也不生效 10:20:55.354 cid unmatched at view.umd.min.js:1 10:20:55.375 TypeErro ...
uniapp小程序运行正常，app运行报cid unmatched at view.umd.min.js
uniapp小程序运行正常,app运行报cid unmatched at view.umd.min.js 阐述 uniapp 运行小程序正常,但是调试App.有时候就会报一大堆错误,是因为小程序编辑器 ...
uniapp 真机运行报错 cid unmatched [object Object] at view.umd.min.js:1
H5端运行页面一切正常,真机调试报错 cid unmatched [object Object] at view.umd.min.js:1 TypeError: Cannot read propert ...
cid unmatched [object Object] at view.umd.min.js:1 TypeError: Invalid attempt to destructure non-ite
uni-app的报错提示: 15:49:36.687 cid unmatched [object Object] at view.umd.min.js:1 15:49:36.708 TypeError ...
uniApp 引入其它组件后，提示Not found -1,252 at view.umd.min.js:1
app端会报错一下错误,H5端不会报错. 原因:注册的组件没有找到. 在init.js文件中引入所有的公用组件,并通过Vue.component(componentName,component)注册, ...
uni-app上传图片遇到TypeError: e.split is not a function at view.umd.min.js:1
uni-app上传图片遇到TypeError: e.split is not a function at view.umd.min.js:1 success:function(res){that.us ...
uni-app 推送测试报错 cid不存在或应用错误，CID不存在或不属于此应用
1.uni-app 推送测试报错解决:以安卓端为例 1.需要获取到真机上面的 cid(clientid) 2.打包一个自定义基座 3.运行>运行到手机或模拟器>运行基座选择>自定义 ...
uniapp中tabbar设置报错文件查找失败，at mian.js:5
小白自学编程之路:uniapp中设置tabbar是报错:文件查找失败:"./pages/xx/xx.vue" at mian.js:5 由于之前自学过一段时间的微信小程序编程,在u ...

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

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

最新文章

热门文章