Vue页面渲染错误：TypeError:Cannot read properties of undefined (reading ‘name‘)

TypeError:Cannot read properties of undefined (reading 'name‘)

错误信息：尝试读取一个undefined中的name

错误原因

错误代码如下：

<script setup>
const goods = ref({})
const getGoods = async () => {
  const res = await getDetail()
  goods.value = res.result
}
onMounted(() => getGoods())
</script>

<template>
<el-breadcrumb-item>{{ goods.categories[1].name }}</el-breadcrumb-item>
</template>

goods初始值为空对象，在数据没有返回之前，空对象取出的数据为undefined，所以报错

解决方法

1. 可选链的语法?.
2. v-if手动控制渲染时机，保证只有数据存在才渲染

使用可选链语法"?"进行解决

<el-breadcrumb-item>{{ goods.categories?.[1].name }}</el-breadcrumb-item>

使用v-if进行解决

<template>
<!-- 通过某一个后端返回后才有的字段进行判断是否已经存在数据 -->
<div v-if="goods.details">
    <el-breadcrumb-item>{{ goods.categories[1].name }}</el-breadcrumb-item>
</div>
</template>

可选链语法

可选链语法是一种在对象的属性或方法为空值时防止抛出错误的解决方案。它使用问号（?）来判断一个对象是否为空。其语法如下：

object?.property // 对象的属性
object?.method() // 对象的方法

如果 object 存在，则取对象属性或调用方法；如果 object 不存在，各自返回 undefined，而不是抛出错误。可以使用可选链语法替代空检查和 null 或 undefined 值的测试，简化代码的编写和逻辑处理的过程。

例如，在以下的代码片段中，通过可选链语法避免了 user 和 user.address 属性值为 undefined时的运行时错误：

const user = {
  name: 'John',
  // address 属性被省略了
};

console.log(user?.address?.city); // Output: undefined

需要注意的是，可选链语法只能在 ES2020 以上版本的 JavaScript 中使用。