如何解决执行调度程序刷新期间未处理的错误这可能是 Vue 内部错误
[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/vue-next
at <Anonymous key=1 >
at <Anonymous pager="true" options= {initialSlide: 1,speed: 400} >
at <Anonymous fullscreen=true >
at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> >
at <Product Details ref=Ref< Proxy {…} > key="/products/1" isInOutlet=true ... >
at <IonRouterOutlet>
at <IonApp>
at <App>
Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:222:16)
at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3958:9)
at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4312:21)
at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)
如果我添加硬编码的幻灯片,它不会显示任何错误。但是,如果我使用 v-for
循环动态添加幻灯片,则会显示上述错误。
这是模板:
<ion-slides pager="true" :options="slideOpts">
<ion-slide v-for="image in product.product_images" v-bind:key="image.id">
<h1>Slide 1</h1>
</ion-slide>
</ion-slides>
这是脚本:
export default {
name: "Product Details",components: {
IonContent,IonHeader,IonPage,IonTitle,IonToolbar,IonSlides,IonSlide,},data() {
return {
product: {},};
},setup() {
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
const slideOpts = {
initialSlide: 1,speed: 400,};
return { slideOpts };
},mounted: function () {
fetch("http://localhost:4000/api/products/" + this.$route.params.id,{
method: "get",})
.then((response) => {
return response.json();
})
.then((jsonData) => {
this.product = jsonData;
// console.log(jsonData.product_images);
});
},};
我在代码中做错了什么?
解决方法
可以说,这个错误信息可以改进。
该错误是由于尝试使用 undefined
迭代不可迭代的(在您的情况下为 v-for
)引起的。具体来说,在 mount()
中进行的调用返回之前,product.product_images
是 undefined
,因为您将 product
作为空对象启动。
Vue 2 风格的解决方案
- 将
product.product_image
实例化为可迭代的:
//...
data: () => ({
product: { product_images: [] }
})
或者在模板中提供一个空数组作为后备:
<ion-slide v-for="image in product.product_images || []" v-bind:key="image.id">
<h1>Slide 1</h1>
</ion-slide>
或在 v-if
的父级上放置一个 v-for
:
<ion-slides pager="true" :options="slideOpts" v-if="product.product_images">
...
</ion-slides>
Vue 3 风格的解决方案
通过给它一个 ProductDetails
函数,使整个 async setup
组件暂停。在 setup
函数中,调用以获取产品。
概念证明:
//...
async setup() {
const product = await fetch("http://localhost:4000/api/products/" +
this.$route.params.id,{
method: "get",}).then(r => r.json());
return { product }
}
现在将 <product-details>
放入 <Suspense>
的 <template #default>
,提供一个回退模板(当 <Suspense>
解析在其默认模板中找到的所有异步组件时将呈现该模板):
<Suspense>
<template #default>
<product-details></product-details>
</template>
<template #fallback>
Product is loading...
</template>
</Suspense>
使用 <Suspense>
的美妙(和优雅)在于父级不需要知道标记尚未呈现的实际条件。它只是等待所有可挂起的组件解决。
简而言之,使用 <Suspense>
,您不再需要使用 v-if
将呈现逻辑硬编码到模板中,并在包装器上明确指定条件。每个异步子组件都包含自己的条件,并且它向父组件宣布的所有内容是:我完成了。全部完成后,将呈现它们。
您可以更改组件名称吗?
export default
name: "Product Details" ... <= here
,
在使用畸形钩子(created
、mounted
等...)时也会遇到此错误。就我而言,created
是一个对象而不是一个函数。
不好:
created: { /* some code */ }
好:
created() { /* some code */ }
// or...
created: function() { /* some code */ }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。