Vue3显示列表数据循环警告渲染函数执行期间未处理的错误

Question

我有一个带有apollo可组合设置的Vue3。在模板中显示for循环数据，如下所示:

<template>
<div class="surface-card p-4 shadow-2 border-round w-full lg:w-8" style="margin:0 auto;">
<ul class="list-none p-0 m-0 flex align-items-center font-medium mb-3">
<li>
<a class="text-500 no-underline line-height-3 cursor-pointer">Tab1</a>
</li>
<li class="px-2">
<i class="pi pi-angle-right text-500 line-height-3"></i>
</li>
<li>
<span class="text-900 line-height-3">Tab2</span>
</li>
</ul>
<div class="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
<div>
<div class="flex font-medium text-3xl text-900">Client List</div>
</div>
<div class="mt-3 lg:mt-0">
<Button label="Add" class="p-button-outlined mr-2" icon="pi pi-user-plus"  @click="openModal" />
</div>
</div>
<!-- for loop -->
<p v-for="c in result.clients" :key="c.id">
<b>{{ c.id}}</b>
</p> 
</div>
</template>

显示数据和代码工作没有问题，但我在浏览器中得到两个错误:

[Vue warn]: Unhandled error during execution of render function 
at <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
at <RouterView> 
at <App> 
at <App> runtime-core.esm-bundler.js:38
[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 <ClientsList onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
at <RouterView> 
at <App> 
at <App> runtime-core.esm-bundler.js:38

用for循环注释掉代码的循环部分会使错误消失。.vue文件中的JavaScript如下所示:

import { getClients } from "@/graphql/query.js"
import { useQuery } from '@vue/apollo-composable'

export default {
name: 'clients_list',
setup(){
const { result } = useQuery(getClients);
return { result }
},

查询数据返回到变量结果如下所示:

{
"data": {
"clients": [
{
"id": "1",
"name": "Test1"
},
{
"id": "2",
"name": "Test2"
}
]
}
}

如何去掉这两个警告?

Answer 1

不熟悉VueApollo，但这可能表明，在一些渲染周期一些Ref值是undefined，但在渲染(result.value?)。

在快速查看了VueApollo之后，我认为useQuery方法是异步的(仅仅基于它也可以报告加载状态的事实)-它返回Ref以保存结果，但是当请求完成时，数据将在稍后的时间不可用。我无法复制完全相同的警告信息，因为似乎你有其他的东西在你的设置。但是如果result.value是异步填充的，那么一开始就会引起问题:

关于Vue SFC Playground的示例

尝试防止undefined，看看它是否有帮助:

<p v-for="c in result?.clients" :key="c.id">
<b> {{ c.id }} </b>
</p>