Cannot read property 'xxx' of undefined 涉及到发送网络请求获取数据、展示数据到页面时，VUE报错

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

业务场景

例如，页面中使用了变量{{objArrList}}和{{objArrList.obj}}，该objArrList是一个数组，其成员是多个obj。需要先发送网络请求，获取到数组objArrList，再展示该数组的obj成员。

报错原因

基本原理：
1.VUE解析template中的{{someVariable}}时，若变量值为undefined，VUE不会报错，页面上显示该变量的位置为空；但如果该变量不存在，则VUE会报错Cannot find property 'someVariable'...
2.发送网络请求获取数据存在延迟，当objArrList还未获取到时，VUE 解析到的页面中的objArrList则为undefined。
以下将对页面展示变量{{objArrList}}和{{objArrList.obj}}的两种情况分别分析

对于页面中展示的objArrList ：虽然网络请求还未返回，没获取到数据，VUE 初次解析objArrList的结果为undifined，但不会有任何报错。待获取到数据之后，objArrList的值改变，VUE 检测到数据变化，重新解析模板，页面也会更新。
对于页面中展示的objArrList.obj：vue 初次解析时objArrList为undefined(原因详上)。undefined上当然没有obj属性，所以objArrList.obj则会报错。上诉报错的实际情况在Vue2和Vue3中，也有差别。
- Vue2 中，这种情况不会影响页面效果，页面仍然正常，但是控制台会报错Cannot read property 'obj' of undefined
- Vue3 中, 这情况页面会直接解析失败，控制台会报错Cannot read property 'obj' of undefined

解决方法

在定义objArrList时，给objArrList定一个默认值{}或者[]等（根据页面展示的变量决定）

例一：对于objArrList.obj类型

//VUEX配置文件
const getters = {
  goodsList(ownState) {
    //假如数据获取失败，至少应该返回一个[]
    return ownState.searchInfo.goodsList || []
  },

例二：对于objArrList.obj1.obj2类型需要给objArrList,objArrList.obj1都指定默认值对于objArrList的默认值参例一

//对于objArrList.obj1的默认值，可以使用computed
const defaulttList = computed(() => {
  return props.imgList[0] || {}
})