问题记录:A component with async setup()must be nested in a in order to be rendered.

这篇具有很好参考价值的文章主要介绍了问题记录:A component with async setup()must be nested in a in order to be rendered.。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

报错详情:

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. 翻译: setup函数返回了一个promise,但没有边界在父组件树中找到。 具有异步setup()的组件必须嵌套在中才能呈现。

报错原因:

如果使用<script setup>,可以在顶部直接使用await,结果代码会被编译成 async setup()。

例如子组件A:

<script setup>
import {getAllFrd} from '@/api/addfriends'
let text = await getAllFrd()
</script >

这样使用了async setup()的子组件,父组件需要和Suspense配合使用,否则子组件渲染不出来,报错warn以上内容。

解决:

父组件处理:文章来源地址https://www.toymoban.com/news/detail-618496.html

<script setup>
import { defineAsyncComponent } from 'vue'
const A = defineAsyncComponent(() =>
  import('@/components/A.vue')
)
// 注意:同一个组件例如A组件,只能用一种引入方式,要么 defineAsyncComponent,要么import,
//不能不同父组件一个import一个defineAsyncComponent,否则打包时粘包
</script >

<template>
  <div class="index">
    <Suspense>
      <template #default>
        <A />
      </template>
    </Suspense>
  </div>
</template>

到了这里,关于问题记录:A component with async setup()must be nested in a in order to be rendered.的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中404页面显示问题Catch all routes (“*“) must now be defined using a param with a custom regexp.

    目录 项目场景:vue3,路由,404页面 问题描述 原因分析: 解决方案: 使用/:pathMatch(.*)或者/:catchAll(.*) 此图片用来封面引流的,前面不看都行,解决方案,点我点我 vue3项目中404页面的显示 Catch all routes (\\\"*\\\") must now be defined using a param with a custom regexp. 当访问url时,访问没有配置的路由时

    2024年02月15日
    浏览(31)
  • Component is not found in path “components/xxx/xxx“ (using by “pages/xxx/xxx“) 问题记录

    相信做过小程序的都遇到过Component is not found in path “components/xxx/xxx“ (using by “pages/xxx/xxx“) 这个问题,一般情况的是引用路径有问题,检查代码路径改对就好了,又或者是 分包 影响的 先说一下我得使用场景,不一定适用于所有人,只是记录一下我遇到的 1.小程序是分包的

    2024年02月02日
    浏览(53)
  • Unity解决动画不可用:The AnimationClip ‘XXX‘ used by the Animation component ‘XXX‘ must be marked as Legacy.

    在Unity 2019.4.38.f1c1以上的版本,创建的创建Animation Clip无法使用,作为组件的默认Clip的话,那么游戏运行的时候这个Clip其实是播不出来的,而且Console会报一条 “The AnimationClip ‘XXX’ used by the Animation component ‘XXX’ must be marked as Legacy.” 的警告信息,以及一条 “Default clip co

    2023年04月08日
    浏览(48)
  • Linux服务器报错解决The git executable must be specified in one of the following ways: - be included in

    在利用深度学习服务器,利用Xshell进入端口,想要运行深度学习项目时碰到了以下错误: Traceback (most recent call last):   File \\\"/opt/conda/envs/[yolov5_SE]/lib/python3.9/site-packages/git/__init__.py\\\", line 166, in module     refresh()   File \\\"/opt/conda/envs/[yolov5_SE]/lib/python3.9/site-packages/git/__init__.py\\\", line

    2024年02月02日
    浏览(50)
  • Git报错fatal: this operation must be run in a work tree

    学习git在初始化仓库后查看git状态是报错fatal: this operation must be run in a work tree: 提示:这里描述项目中: 使用git init --bare 进行建立裸仓库之后,在使用git 其它的命令都会出现fatal:This operation must be run in a work tree 问题,处理方法: 解决方法:在该仓库目录下,新建文件夹,

    2024年02月11日
    浏览(59)
  • 【React】‘React‘ must be in scope when using JSX react/react-in-jsx-scope

    React 报错: 意思是在使用 JSX 时,没有引入 React ,比如像这样: 在使用 import 引入时,没有引入 React 。所以在被 Eslint 的 \\\"plugin:react/recommended\\\" 检查时,就会报错。 于是很多人就选择引入的时候加上 React ,这样 这样确实不报错了,但是他们忽略了一个版本事实: 在 React@17

    2024年02月15日
    浏览(42)
  • 踩坑:Invalid character found in method name. HTTP method names must be tokens

            在进行本地小程序与服务端请求时,由于加了签名认证,访问接口时报错 Spring boot端 小程序端    将 https: 更换成 http: 示例: https: //localhost:8080  改为   http ://localhost:8080       ssl证书到期了 Tomcat的header缓冲区大小不够 参考链接           3.修改端口号 server.xml中加上

    2024年02月07日
    浏览(52)
  • 报错:Invalid character found in method name. HTTP method names must be tokens

    是我在使用postman去调用后台接口时,引发的错误。因为之前还是好好的,这个接口就有问题。那必然是这个接口一些参数设置啥的出了问题。 关于网上有提到的解决方法: Tomcat的header缓冲区大小不够,只需要在server.xml中增加maxHttpHeaderSize字段即可 注意你的接口访问地址是

    2024年02月15日
    浏览(51)
  • FPGA:调试报错Error:add_1 must be in range [-1,DEPTH-1]解决办法和调试思路

    在进行FPGA调试的过程中,进行行为仿真,能观察设计的逻辑是否正确,通常情况下需要进行run all的运行,这样才能看到信号在运行过程中的状态, 在调试的过程中遇到如下的报错: 用的是vivado 2019.1联合modelism 10.7进行的仿真过程,用vivado内置的仿真也是同样的报错信息,建

    2024年02月15日
    浏览(88)
  • 【报错】onMounted is called when there is no active component instance too be associated with.

    onMounted is called when there is no active component instance too be associated with.Lifecycle injection APIs can only be used during execytion of setup(), If you are using async setup(),make sure to register lifecycle hooks before the first await statement. 在 import {onMounted } from \\\'vue\\\' 之后使用 使用了Vue3的写法但并未遵从Vue3的格式 如

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包