Vue 3：无法读取空值的属性“id”。

Question

我想从 API 显示产品列表，但出现错误：

Uncaught (in promise) TypeError: Cannot read property 'id' of null
at eval (Home.vue?bb51:103)
at renderList (runtime-core.esm-bundler.js?5c40:6635)
at Proxy.render (Home.vue?bb51:2)
at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
at componentEffect (runtime-core.esm-bundler.js?5c40:5265)......

我的产品如下：

[
  {
    "id": 1,
    "name": "椅子",
    "categoryId": 12,
    "unitId": 2,
    "price": 66000000,
    "salePrice": 0,
    "material": "木头",
    "size": "x"
  },
]

我的代码如下：

Home.vue 文件

 <ProductCard v-for="product in products" :key="product.id" :product="product" />

ProductCard.vue 文件

<script>
export default {
  name: "ProductCard",
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
};
</script>

ProductService.js 文件

const apiClient = axios.create({
    baseURL: 'http://localhost:8888/api/v1',
    withCredentials: false,
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
})

export default {
    getProducts() {
        return apiClient.get('/product/get-list-product-by-subcategory')
    },
}

当我在控制台中打印产品列表时，它仍然工作。

是否有人知道我的代码中的错误在哪里？

更新：

我尝试修复“无法读取 null 属性'id'”的错误，Steve 的回答虽然删除了我开发工具中的红色警告，但不解决我的数据问题。我发现我的代码通过使用 this.products = response.data.data 来运行起来。

ProductService.getProducts()
      .then((response) => (this.products = response.data.data))
      .catch((error) => console.log("error: " + error));

我自己解释一下： 当 console.log(this.products = response)

并且我需要使用 this.products = response.data.data 才能进入到数组中。

Answer 1

尝试这个

<产品卡片 v-for="产品在产品列表中" : 关键字="产品. _id" : 产品 = "产品" />

Answer 2

apiClient.get(...)

返回一个 promise，而不是实际从 API 调用中获取的数据。

你需要像这样添加 then：

apiClient.get(...).then(response => (this.products = response))

然后当 apiClient.get 完成时，this.products 将被填充为从 API 中获取的数据。