使用 Fetch API 时无法读取 null 的属性（读取“值”）

Question

我想从 api 获取一些产品，问题是模板不会等待异步函数运行，也不会等待

products

属性填充获取的数据，因为它是异步函数，所以

 的值当模板运行时，products

将为空，

products.value

将给出错误

cannot read properties of null (reading 'value')

，所以我在尝试显示产品之前使用

v-if

检查是否有产品，但它什么也不显示，因为它没有捕获获取数据后对

products

属性进行了更改，在

react

和

useEffect api

中，我可以传递依赖项数组并指定

products

状态以进行更新，

vue

中的等效项是什么？预先感谢

import { ref, watchEffect } from "vue";

const products = ref(null);

watchEffect(() => {
    fetch("/products")
        .then((response) => response.json())
        .then((data) => (products.value = data));
});

<template>
  <div v-if="products">
   <ul v-for="product in products.value">
    <li class="py-4 px-2">
     <Link href="...">
      <img :src="product.imageUrl"/>
       <p>{{ product.name }}</p>
     </Link>
    </li>
   </ul>
  </div>
</template>

Answer 1

只需使用

<ul v-for="product in products">

。

参考文献会在模板中自动展开。所以最初你试图获得

(null).value

。

你也不需要

watchEffect()

（里面没有反应性依赖），只需在组件的根目录中进行提取即可。