Vue3 - 悬念不渲染回退

Question

我有以下两个组件（父组件和子组件）

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Index.vue (Parent)\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _GetShipment.vue (Child)\n

\n

在Index.vue我尝试使用 Office.js\ 的 getAsync 获取电子邮件正文的内容：

\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 Index.vue (Parent)\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _GetShipment.vue (Child)\n

\n

上面检查电子邮件正文内容以查看是否存在正则表达式匹配。如果存在，它将把匹配项添加到数组中shipments。

\n

目前，如果仅找到一个匹配项，则该匹配项将在名为 的子组件中呈现_GetShipment：

\n

<script>\nimport Shipment from \'./_GetShipment.vue\';\nimport { ref, defineComponent } from \'vue\';\n\n\nexport default defineComponent({\n    setup() {\n        const shipments = ref([]);\n\n        Office.context.mailbox.item.body.getAsync(\n            "text",\n            function (result) {\n                if (result.status === Office.AsyncResultStatus.Succeeded) {\n                    let matches = result.value.match(/S\\w{3}\\d{8,9}/ig);\n                    if(matches){\n                        shipments.value = matches;\n                    }\n                }\n            }\n        );\n\n        return {\n            shipments,\n        }\n    },\n    components: {\n        Shipment,\n    },\n})\n</script>\n\n<template>\n     <div>\n         <div v-if="shipments.length === 1">\n             <Shipment :id="shipments[0]" />\n         </div>\n     </div>\n</template>\n

\n

获取电子邮件正文内容工作正常，使用 获取详细信息也是如此fetch()。

\n

但是，加载回退Suspense并未被触发。加载页面时，它是简单的空白，直到fetch完成。

\n

为什么没有#fallback被渲染？

\n

Answer 1

您错误地<Suspense>在具有async setup. 需要<Suspense>位于祖先中（即根和使用 的组件之间的任何组件async setup）。

事实上，您的组件渲染完全没有错误，这意味着您已经<Suspense>在祖先中拥有了 ，因此这里的解决方案是删除组件内的async setup，或者将 移至<Suspense>呈现后备的包装器。