前端解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)的多种情况(前端解决页面加载白屏)

前端解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)的多种情况 问题描述：控制台报错“TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

推荐整理分享前端解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)的多种情况(前端解决页面加载白屏)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端解决跨域的三种方法,前端解决跨域问题的8种方案(最新最全),前端解决跨域的几种办法,前端解决浏览器兼容问题,前端解决跨域,前端解决跨域问题的8种方案(最新最全),前端解决跨域的三种方法,前端解决跨域问题的8种方案(最新最全),内容如对您有帮助，希望把文章链接给更多的朋友！

例如：TypeError: Cannot read properties of undefined (reading '$el')     at eval

原因分析及解决

情况一： 出现该错误的原因是因为你花括号中的某些属性未定义。极大可能是因为你写错了属性名称

情况二： 异步请求获取数据时，由于数据时异步获取的，所以一开始是没有该数据属性，这种情况下也会报这种错误。比如说我这里有一个数据tableData，初始值为一个空对象。我们在使用{{tableData.detail}}是不会报错的，但如果是{{tableData.detail.name}}这样就会报错了，这是为什么呢？ 因为，tableData.detail已经是一个undefined了，你undefined.name就肯定会报错了。 所以在初始化时，detail属性赋值为空对象就行了。

情况三：

后端返回给你的数据没有这个属性 或者 返回的有的有数据有的是null

这个时候需要先查一下，可以加v-if进行判断

情况四：

使用$nextTick,刷新表格的时候，表格未自定义属性，或自定义属性引用错了(因为方法是现成复制过来的找了老半天，坑！)

<template>// 起初没有定义ref="multipleTable" <el-table ref="multipleTable" :data="tableData" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }"> </el-table></template> methods: { getData() { let params = { ...this.queryFrom } params.pageNo = params.pageNo.toString() params.pageSize = params.pageSize.toString() getSettlementOrder(params).then(res => { this.tableData = res.result.data || [] // 在数据更新后执行刷新表格 this.$nextTick(() => { // myTable是表格的ref属性值 if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) { this.$refs.multipleTable.doLayout(); } }) this.total = res.result.total || 0 this.tabHeight = window.innerHeight - this.$refs.multipleTable.$el.offsetTop - 170; }) },