setup function returned a promise, but no ＜Suspense＞ boundary was found in the parent component tree

原创 于 2024-10-19 14:09:49 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

Component : setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered.

vue3 中 setup 顶层 不能直接使用 await
要用一个方法封装一下
比如，你需要等待getFireInList执行完再执行getFireOutList
await getFireInList()
await getFireOutList()
这么写就报错了，页面直接空白，控制台会有黄色警告

正确写法
async function haha() {
await getFireInList()
await getFireOutList()
}

vue 异步处理_在Vue 3 / Composition API中处理异步
weixin_26738395的博客
08-24 7187
vue 异步处理A couple of months ago at work, we’ve decided to go all-in on Composition API with a new version of our product. 几个月前，我们决定使用新版本的产品全面使用Composition API。 And from what I can tell — looking aroun...
四、【Vue3】——setup不得不说的两个注意点
yifei1234567的博客
04-01 1951
在Vue3中setup被称为组合式API表演的舞台，可见其重要性与地位，在小编第一篇中浅谈过setup的使用，这节可以进阶学习一下setup中两个注意点：执行时机以及其参数。
问题记录：A component with async setup()must be nested in a in order to be rendered.
m0_67987829的博客
01-07 8154
suspense嵌套解决setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered.
uniapp + vue3开发中组合式函数必须是一个同步函数
SilenceJude的博客
04-24 5587
vue3中的组合式函数使用时，导出的组合式函数必须是一个同步函数。
记一次误用顶层await导致的路由渲染错误
昆吾kw的博客
04-22 4420
起初按照直觉，以为是路由表配置出了问题，导致路由渲染不出来，反复调试路由配置，始终不奏效。这就导致了一个问题，想使用 await，必须要将其定义在一个 async 函数中，再调用此函数。，它 支持在 async 函数以外使用 await，但是只能在一个模块的顶层中使用。之所以被渲染成注释节点，看似是路由组件没有正确渲染，也有可能是组件本身出了问题。这自然不是在模块顶层中使用了，也就导致了在解析上出现问题，导致组件不能正确渲染，最终导致对应的路由视图没有渲染出来。起初由于空页面，空节点，误解是路由的问题。
vue3的setup的使用和原理解析
weixin_42974827的博客
09-24 2万+
在vue3中，新的setup函数属性给我们提供了书写的便利，其背后的工作量无疑是巨大的，有状态的组件的初始化的过程，在 setup 函数初始化部分我们讨论的源码的执行过程。
Vue3学习笔记3 生命周期、异步组件、代码分包、Suspense、依赖注入、Mitt、v-model、自定义指令directive
AIpoem的博客
01-24 3239
1. 生命周期 2. 异步组件-代码分包-suspense 3. Teleport传送组件 4. 依赖注入Provide / Inject 5. Mitt库的使用 6. v-model和.sync修饰符 7. 自定义指令
.【vue3+ts】A component with async setup() must be nested in a ＜Suspense＞ in order to be rendered.
getElementme的博客
08-21 3549
这个是一个实验特性！就是不要上生产，保不齐你上生产就改了，所以这个警告很简单，只要子组件setup函数里面不要返回Promise就可以了。所以你需要vue3提供的新特性，使用异步组件，这个vue3提供的为异步组件实现的一个加载方法；函数是异步的（返回一个Promise），那么它必须嵌套在一个。函数中返回了一个Promise，但是在父组件树中没有找到。在Vue 3中，如果一个组件的。最近遇到遇到了个不大不小的警告，所以啊，把await去掉就可以了。
Vue笔记-4-Vue3.0
の博客
03-27 238
vue笔记-4，vue3.0
vue3-setup函数使用注意事项
qq_58946831的博客
11-26 1457
setup函数返回两种值 1、 若返回一个对象，则对象中的属性、方法，在模板中可以直接使用。（重点关注！常用） export default { name: 'App', setup() { let name = "罗根"; let age = 18; function showName() { alert(`姓名：${name} 年龄：${age}`) } // 返回一个对象（常用） return { name,
vue3新增Suspense组件
前端精髓
09-22 7530
React React 16.6 新增了 <Suspense> 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示： const ProfilePage = React.lazy(() => import('./ProfilePage')); // 懒加载 // 在 ProfilePage 组件处于加载阶段时显示一个 spinner <Suspense fallback={<Spinner />}&gt
vue 3.0学习
z2475371077的博客
08-16 593
关于学习Vue3.0的一些个人心得体会,分享给同学们 创建一个Vue3.0的项目 1、npm init vite-app vue3.0 2、cdvue3.0 3、npm install 4、npm run dev 3.0的一些亮点 Performance：性能比Vue 2.0更强。 Tree shaking support：可以将无用模块剪辑，仅打包需要的。 Composition API：组合API Fragment, Teleport, Su...
vue3新特性-Suspense和Teleport
lln0001的博客
10-20 821
前言 阅读vue3源码的时候，发现会根据不同shapeFlag来做不一样的渲染，进而发现了vue3的一些新特性。好吧，我承认这个先后顺序可能有点点反。好了，让我们进入正题吧。 Suspense【试验性，可能变动，生产环境请勿使用】 官方说明：在正确渲染组件之前进行一些异步请求是很常见的事。允许将等待过程提升到组件树中处理，而不是在单个组件中 实例：有一个组件的一些数据需要异步请求，请求完成后再渲染。为了显示优化，我们会在请求返回前显示一个Loading。 进入页面，显示 Loading，...
ajax 上传文件报错,Ajax使用formdata异步上传文件，报错the request was rejected because no multipart boundary was found...
weixin_32386693的博客
08-05 1143
基于jQuery的Ajaxs使用FormData上传文件要注意两个参数的设定processData设为false把processData设为false，让jquery不要对formData做处理，如果processData不设置为false，jquery会把formData转换为字符串。contentType设为falsehttp发送multipart/form-data请求报文示例POST /a...
vue-常见错误解决
云簪阁
09-01 1万+
1.运行vue时浏览器报错Unknown custom element: <custom-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option 原因：被引用的组件页面没有进行export，导致寻找不到浏览器...
[Vue warn] Failed to resolve component：报错问题。
m0_67393827的博客
03-06 1万+
在一个vue3项目中，引入一个自定义组件时出现了[Vue warn]: Failed to resolve component：【组件名】这样的警告，引入的组件没有出现在页面中。网上查了半天没找到原因，后来将vue3中的defineComponent去掉后，就不再报错了。 <script> import { defineComponent } from "vue"; import layaside from "./Aside"; export default defineComponent({
vue3出现此警告信息：[Vue warn]: Failed to resolve component: dpan
李瑞清的博客
03-01 8483
警告内容： runtime-core.esm-bundler.js:6870 [Vue warn]: Failed to resolve component: dpan 原因： 问题出现的原因是因为，你导入了组件，但是没有使用它，才引起的警告 比如： <script lang="ts" setup> import { a } from 'xxxx'; </script> 但是在<template></template> 你并有使用...
[Vue warn]: Failed to resolve component：报错问题。
热门推荐
qq_41983641的博客
03-31 9万+
在一个vue3项目中，引入一个自定义组件时出现了[Vue warn]: Failed to resolve component：【组件名】这样的警告，引入的组件没有出现在页面中。网上查了半天没找到原因，后来将vue3中的defineComponent去掉后，就不再报错了。 <script> import { defineComponent } from "vue"; import layaside from "./Aside"; export default defineComponent({
vue项目常见错误及解决方法
Fxhani的博客
11-29 2万+
vue常见错误解决 1、Error in render: “TypeError: Cannot read property ‘list’ of undefined” **报错：**渲染错误：“未定义的Type Error：无法读取属性”列表 **原因：**没给list定义，也就是说在temple中用到list了，但是在data中没定义这个字段，如果已经定义了但是还是报错，请检查下自己是否拼错了单词...
runtime-core.esm-bundler.js:202 [Vue warn]: Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree. A component with async setup() must be nested in a <Suspense> in order to be rendered. at <UserForm ref=Ref< null > entity=null checkType="multiple" ... > at <BaseTransition appear=false persisted=false mode=undefined ... > at <Transition enter-active-class="layer-drawer-anim layer-anim-rl" leave-active-class="layer-drawer-anim layer-anim-rl-close" > at <LayLayer type="drawer" title="添加用户" shadeClose=false ... >
最新发布
03-23
用户提到的错误信息是：“Component <Anonymous>: setup function returned a promise, but no <Suspense> boundary was found in the parent component tree.” 这意味着某个组件的setup函数返回了Promise，但父...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xl__qd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值