526互联

uniapp开发[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug.

发布时间 2023-11-23 15:54:54作者: 逍遥云天

如下，uniapp开发nvue页面报如下警告：

15:30:25.079 [Vue warn]: Unhandled error during execution of render function
 at <UniGroupclass="w710 cell_group bg_white border_radius16 flex_row"top="10">
 at <Index__pageId=1__pagePath="pages/goods_detail/index"__pageQuery={}>
15:30:25.080 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
 at <UniGroupclass="w710 cell_group bg_white border_radius16 flex_row"top="10">
 at <Index__pageId=1__pagePath="pages/goods_detail/index"__pageQuery={}>

出现此类错误，一般是动态获取的数据还没加载完就开始渲染了，所以就出现错误了。

要解决这个问题，就需要给要展示的数据所在的组件进行条件判断，如下：

<block v-if="(skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color) || (skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size)">
   <text class="f13" v-if="skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color">{{ skuData.goods_color[0].goods_color }}</text>
   <text class="f13" v-if="skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size">{{ skuData.goods_size[0].goods_size }}</text>
</block>

先来看下skuData的数据结构：

skuData: {
   goods_color: [],//颜色sku列表 [{goods_color:黑,indexs:[index0],selected:true},{goods_color:白,indexs:[index1,index2],disabled:false}]
   goods_size: [] //尺寸sku列表 [{goods_size:20,indexs:[index0,index1],selected:true},{goods_size:22,indexs:[index2],disabled:false}]
}

skuData本身是非空对象，无需判断，但是下边的goods_color、goods_size是两个数组，数据动态获取，所以就必须要先对数组长度进行判断，确定有数据才能进行下一级的判断。

v-if="(skuData.goods_color.length > 0 && skuData.goods_color[0].goods_color) || (skuData.goods_size.length > 0 && skuData.goods_size[0].goods_size)"

这样一级一级的判断到要渲染的数据，渲染的时候就不错报异常了。

当然，如果数据层级比较深，那么数据渲染的时候需要添加的条件判断也是会比较长的。

也许在小程序或者vue中不写部分层级也不会报错，但是完整的对每一级进行判断肯定是最正确的、兼容性最强的。