我想从 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": "chair",
    "categoryId": 12,
    "unitId": 2,
    "price": 66000000,
    "salePrice": 0,
    "material": "wood",
    "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 的回答虽然删除了 devtool 中的红色警告，但没有处理我的数据：我的数据仍然没有显示。我发现我的代码通过使用 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 进入数组