当前位置:首页 » 《随便一记》 » 正文

【Vue】- 报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“

7 人参与  2023年05月04日 15:45  分类 : 《随便一记》  评论

点击全文阅读


在created()钩子函数请求接口并报错数据,渲染在dom元素是可以正常渲染,但是在开发者工具中就会报错 Error in render: "TypeError: Cannot read properties of undefined (reading 'nickname')"

 意思是 在created调用封装请求接口的函数 ,获取到的数据再给保存起来并渲染到dom元素,不过数据渲染之前 dom元素会先渲染一次到渲染获取到的数据。那么就会导致渲染获取的数据会未定义,没有这个属性/对象。

说通俗点就是三层表达式a.b.c,在对象a中没有对象b,那么读取对象a.b.c中的值,自然会报错。如果是两层表达式a.b则不会报错,返回的是undefined。

明白了原因之后上手排查代码发现果然下面vue模板代码中出现了三层表达式,十分可疑,出错的地方应该就在这里。

原因:


我们发现这里的 list 是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:

异步数据先显示初始数据,再显示带数据的数据,

所以上来加载 list 时候还是一个空对象如下:

当渲染完成后,才加载异步数据
所以在渲染时,出现的三层表达式在list中取 list 的 user 属性是不存在,再在这个对象中取其他值自然会报错,但是渲染完成后,list中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但开发者工具会报错的原因
 

解决方法:

使用 v-if 来进行判断

 

判断是否有list.user这个属性或等于undefined,dom渲染前没有这个属性会销毁,dom渲染之后有这个会显示。 

 


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/60715.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 日暮青山绿渐隐全书+后续+结局(许星森纪冰雪)_(日暮青山绿渐隐全书+后续+结局)列表_笔趣阁(许星森纪冰雪)
  • 小透明逆袭误撩后被大佬宠上天结局+番外(许惟昭方肃礼)_(小透明逆袭误撩后被大佬宠上天结局+番外)列表_笔趣阁(许惟昭方肃礼)
  • 望不穿月影西沉列表_望不穿月影西沉(顾南辰林晚意)
  • [余生尽沧海,万年路无归]小说后续在线免费阅读_「阿辰北辰修仙」口碑神作必读篇章
  • 小透明逆袭误撩后被大佬宠上天全书+后续+结局许惟昭方肃礼全书+后续+结局免费_(小透明逆袭误撩后被大佬宠上天全书+后续+结局)许惟昭方肃礼列表_笔趣阁(许惟昭方肃礼)
  • 陆依霜轩辕翊的_陆依霜轩辕翊的
  • [不踏月光不相逢]限免完整章节合集‌_[岳母如烟周枫]小说精彩章节试读
  • [重回八零渣夫悔婚娶了假千金,我换亲却嫁了真富二代]小说章节试读_顾磊赵春红柳小莲完整版在线阅读
  • 全文人面桃花长相忆阮雾梨后续全书+番外(闻砚辞阮雾梨)列表_全文人面桃花长相忆阮雾梨后续全书+番外
  • 全文繁花盛意难平(轩辕翊陆依霜)列表_全文繁花盛意难平
  • 气死!女帝嫌弃的废物有神坐镇番外+完结(武玲珑秦铭)_气死!女帝嫌弃的废物有神坐镇番外+完结武玲珑秦铭
  • [被哥哥和未婚夫的白月光冒充身份后,却不知我世界首富身份]小说免费试读_孙女小姐博文爆款小说高能章节试读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1