Bootstrap

前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘)



前言

项目中遇到问题:前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘)

提示:以下是本篇文章正文内容,下面案例可供参考

一、报错截图?

这里是我在项目中产生报错的截图:
在这里插入图片描述

报错的原因:
这个是使用了undefined或者null的值进行了.attrname或者解构造成的

二、解决步骤

  • 首先,重新运行项目,复现刚才的报错,控制台提示:问题出错在第三方组件上面,然后定位问题的原因是因为第三方组件,还是自己的原因。(如果你不是,请忽略此处)。
  • 其次,将报错的组件,注释掉,看看项目是不是还会报错,结果是同样报错,报错的位置,跑到了其他的第三方组件处,重复操作,继续排查,并注释。直到不显示为止。
  • 进过上面的操作,基本可以判定,不是第三方组件的问题。是我自己处理数据的问题。
  • 好的,接下来,就排查后端返回的数据,和我在前端的显示逻辑。经过排查,后端返回的数据没有统一规范,我并没有进一步详细处理,就在前端进行数据判断进行显示,导致使用了undefined或者null的值进行了.attrname或者解构。
  • 重新在js里面更完善的处理数据,避免上述的问题。全部进行校验之后,项目,不再报错。

总结

在后端返回的数据中,要考虑到多种情况,或者提前做规范,因为前端显示,如果为了图方便,直接使用后端返回的数据,在后端没有返回数据,或者返回null或者undefined的时候,直接在前端解构会导致不必要的错误。(当然,这个只是我自己的个人想法和总结,经供参考!!!)

;