请求接口时,能够完整渲染出整体界面无问题,但是一刷新所渲染的界面就没了,并且开发者工具报出“Error in render: "TypeError: Cannot read properties of undefined (reading ‘xxx’)"错误

原因:

由上图可以看出错误是  不能读取值为undefined的categoryView属性,并且通过vue的调试工具可以看到categoryView属性是在goodsInfo.data下,所以这个错误的主要原因就是goodsInfo中的data属性不存在,也即goodsInfo.data的值为undefined

分析:

vue是异步请求。页面渲染的时候Vuex中state.goodsInfo={}还没有拿到数据,当渲染到绑定了categoryView的div时,因为goodsInfo.data不存在所以会报错。所以我们要在vue中对该data对象进行if判断(v-if = " ")。当data存在时(即已请求到数据,goodsInfo对象不为空)再进行渲染。

(注意,不能用v-show,v-show的机制是结构已加载完成根据条件选择展示或隐藏,而v-if是根据条件判断是否对该结构进行加载展示,)

当我要对goodsInfo.data.categoryView中的内容进行渲染时,对goodsInfo.data进行v-if判断,当goodsInfo中data存在时(即已请求到数据,goodsInfo对象不为空)再对<section>进行结构加载。

修复报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“相关推荐

  1. Echart 5.0+版本报错Error in data(): “TypeError: Cannot read properties of undefined (reading ‘graphic‘)“

    首先第一步需要检查echarts的导入方式,在5.0以后的版本,echarts做了比较大的调整,在vue中引入时必须使用如下命令 // import echarts from 'echarts' 这种 ...

  2. Vue报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘protocol‘)

    问题原因,main.js中引用axios区别: import axios from "axios";Vue.use(axios); 正确写法: import axios from ...

  3. vue报错Error in render: TypeError: Cannot read property 'name' of undefined

    因为请求是异步获取数据,所以最先开始item是一个空对象.item.tournament即为undefined. item.tournament.name就会报错 解决办法:加一个v-if的判断条件

  4. Uncaught TypeError: Cannot read properties of undefined (reading ‘Constructo

    报错内容: Uncaught TypeError: Cannot read properties of undefined (reading 'Constructor') at custom.min. ...

  5. Vue报错:Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

    背景: 当点击按钮时候,正常情况控制台的Network应该要发送一个变化量,现在控制台的Network不仅不显示,而且还报错,报错信息如下: vue.runtime.esm.js?c320:619 [ ...

  6. Uncaught TypeError: Cannot read properties of undefined (reading ‘push’) ---- vue-router报错

    坑点 在使用vue-router@4的时候,由于vue3中没有this.router这个写法,所以我就将解构router方法,放在了函数中,由于函数有作用域就报了这个错误:Uncaught TypeE ...

  7. Python pip install 安装包报错ERROR: Could not find a version that satisfies the requirement XXX解决方法

    Python pip install 安装包报错ERROR: Could not find a version that satisfies the requirement XXX解决方法 文章目录 ...

  8. react 谷歌浏览器报错:Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)

    运行react项目,报错: Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')at Object.i ...

  9. 报错,Uncaught TypeError: Cannot read properties of undefined (reading ‘inputValue‘) at <anonymous>

    错误: Uncaught TypeError: Cannot read properties of undefined (reading 'inputValue')     at <anonym ...

最新文章

  1. 深度学习框架 通道顺序
  2. 大型对冲基金正训练AI交易 5年后AI在量化中将成主流
  3. 企业SAP的二次开发管理之路
  4. java 二维数组_Java中二维数组和异常的内容及应用
  5. 使用 Wireshark 对本地 socket 通信进行数据抓包
  6. 对于大型公司项目平台选择j2ee的几层认识
  7. 华为方舟编译器是黑科技?
  8. 1.13 单用户模式;1.14 救援模式;1.15 克隆虚拟机;1.16 Linux机器相互登录
  9. C# 事务的创建,提交和回滚
  10. opencv学习(二十四)之腐蚀与膨胀
  11. php mysql 进销存_PHP进销存源码 仓库管理系统 WEB进销存 php+mysql 网络版进销存
  12. Telemetry 标准日志接口如何提升运维效率?
  13. 『毒舌电影社区』干掉烂片,让烂片无路可走!
  14. [续]基于高斯两步移动搜寻法(2SFCA)的城市绿地可达性分析[格网]
  15. nn.Flatten()函数详解及示例
  16. CAS算法-实现原理
  17. Python 趣味百题
  18. php修改根目录,phpStudy如何修改端口或WWW目录(网站根目录)
  19. 大学生电子设计竞赛电源资料
  20. 指令集CEO潘爱民受聘为之江实验室智能计算数字反应堆首席架构师

热门文章

  1. 第一章 Sqoop专题之常见面试题
  2. 视频网站服务器用什么配置好?
  3. 软件测试培训分享:哪家软件测试培训机构好?
  4. CSS科技感四角边框
  5. linux进程流量检测,linux使用shell检测并记录网卡流量
  6. 大数据的智能处理和数据可视化实践
  7. 什么是LRU(最近最少使用)算法?
  8. android虚线边框_Android通过代码实现虚线或者虚线框shape
  9. 如何使用Java获取当前时间戳
  10. Windows XP With SP3 简体中文版下载