学会处理项目中，Cannot read properties of undefined (reading '****')

今天项目中报错TypeError: Cannot read properties of undefined (reading 'filter')，开始报错没影响到运行就没管。后面页面中其他功能（清空购物车）购物车模块崩溃了。 

直接翻到最下面看2022.3.4和2022.4.22总结。

 

2022.2.9

// 利用filter过滤在利用reduce累加
  return this.cartList.cartInfoList.filter((element,index,arr)=>element.isChecked ===1).reduce((prev,cur,arr)=>(prev + cur.skuPrice*cur.skuNum),0)

在cartList.cartInfoList（购物车）清空后，打印cartList.cartInfoList返回undefined，故需先返回判断cartList.cartInfoList是否存在 

// 判断购物车列表清单是否清空（也可以判断父元素this.cartList.length!==0）
if (this.cartList.cartInfoList) {
  // 利用filter过滤在利用reduce累加
  return this.cartList.cartInfoList.filter((element,index,arr)=>element.isChecked ===1).reduce((prev,cur,arr)=>(prev + cur.skuPrice*cur.skuNum),0)
}else{
  return 0
}

同理，在使用对象或数组的方法时，报错提示TypeError: Cannot read properties of undefined (reading 'filter'),首先想到判断目标对象或数组是否存在，如果需要可以进一步判断是数组还是对象，判断数组Array.isArray,判断对象Object.prototype.toString。

思考：根据报错，xxx.filter 中的xxx未定义，filter为数组方法，所以需要判断数组是否存在才不会报错。理论上加上一个空数组   || []  兜底应该也不会报错了。

 

---

2022.2.12

今天又遇到类似问题，Cannot read properties of undefined (reading 'userAddress')，属性userAddress的对象为undefined。注：上面为什么要这么写，因为涉及到业务逻辑客户手动删除出现清空购物车的情况

只要加上||{}兜底，若为null或者undefined即初始化为空对象{}，目的防止出现null或者undefined的错误。

思考：根据报错，xxx.userAddress 中的xxx未定义，userAddress明显是一个自定义属性，所以xxx肯定为对象。所以加上一个空对象  ||{}  兜底就不会报错了。

return arr.find(element=>element.isDefault==1)||{}  　　
//搞清楚||或运算符的定义，第一个条件为真，则不需要执行第二个条件，否则执行第二个条件

 

 

 

 

 

 

 

 

---

2022.3.4

再次遇到这种某个属性（方法）未定义的问题页面却能正常显示，思考可能是因为对象/数组渲染问题导致的，第一步应该判断 (reading 'xxx')里的xxx是函数方法（对象or数组的方法）还是自定义属性（肯定是对象），

 

这个问题本质是由于渲染早于异步请求数据返回的时间，其实只需要解决报错undefined的初始化问题，你能理解这个以下方法就很好理解。

一、若报错的undefinde的属性为对象或者数组的api，

　　1.解决方法是在对象/数组后面加上 ||[ ] 或者 ||{ } 兜底，这样渲染的时候就不会报错了

 

二、若报错的undefined的属性为自定义属性，则可以使用以下几种方法

　　1.如果数据是在data里面定义的，最笨的方法，把相应数据结构在data写出来（对应的值为空对象、数组） 

　　2.父级套v-if，数据没有返回时，节点直接不生成，数据返回，节点生成。（if判断的开关就用报错那个属性）

　　3.用&&或者if()判断异步数据已返回，不会用if语句和&&逻辑与 计算布尔值作为开关标识符？点击站内跳转←

 

 

2022.4.22补充

你发ajax请求，数据还没回来，却开始渲染请求来的数据，肯定报undefined啊，为什么有时候又不影响你页面展示？因为请求的数据经过等待肯定回来了，但是控制台上的undefined无法解决。

补充ES6 优雅的解决方法（本质上同3月4日的第三种方法）

 

如何秒用可选链操作符来解决  渲染早于异步请求数据 导致的控制台报错，点击站内跳转←