解决 Vue 中处理异步数据时的“cannot read properties of null”错误

vue.js

2024-03-01 20:34:18

在 Vue 中使用 watchEffect() 函数处理异步数据

问题：处理异步数据时遇到的“cannot read properties of null”错误

异步数据是 Web 开发中的常见问题。在 Vue 中，处理异步数据时，我们可能会遇到“cannot read properties of null”的错误。这是因为在异步函数执行之前，状态变量可能仍然为 null。

解决方法：使用 watchEffect() 函数

为了解决这个问题，我们可以使用 Vue 的 watchEffect() 函数。它允许我们观察响应式属性的变化并执行副作用，例如执行异步操作。当响应式属性更新时，watchEffect() 函数将自动执行副作用。

代码示例

考虑以下代码示例：

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

<script>
import { ref, watchEffect } from "vue";

const products = ref(null);

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

在该示例中，我们使用 fetch() API 从 /products 路由获取产品列表。products 状态使用 ref() 创建，它是一个响应式变量。

watchEffect() 函数被用来观察 products 状态的变化。当 products 状态更新时，它将执行异步函数。该函数从 API 中获取产品并更新 products 状态。

避免 “cannot read properties of null” 错误的技巧

为了解决 “cannot read properties of null” 的错误，我们需要确保在渲染组件之前，products 状态不为 null。我们可以使用 v-if 指令来实现这一点：

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