Vue3显示列表数据循环警告呈现函数执行过程中未处理的错误

Question

我有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循环注释掉代码的循环部分会使错误消失。JavaScript文件中的.vue如下所示：

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，但这可能意味着在某个呈现周期中，某些参考值是undefined，但用于呈现(result.value?)。

在快速查看VueApollo之后，我相信useQuery方法是异步的(仅仅基于它也可以报告加载状态这一事实)--它返回一个保存结果的Ref，但是在请求完成之后数据将不可用。我不能完全复制相同的警告信息，就像你在你的设置中有其他东西一样。但是，如果result.value是异步填充的，它将在一开始引发问题：

虚拟证监会游乐场的例子

试着防范undefined，看看它是否有帮助：

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