Error in render: “TypeError: Cannot read property ‘0‘ of undefined“

约定不等于承诺〃 2023-01-05 05:10 136阅读 0赞

今天在做一个vue商城app项目的时候，出现了一个很奇葩的bug，报错了还能正常渲染页面，其实一开始我就知道这个bug是由于还没得到数据页面就渲染了，所以就报错，因为所有的请求都是异步的，异步的就代表说是需要费时的；  
具体如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]  
这个bug的意思是，它找不到索引为 0 的这一项，因为此时页面渲染的速度，快于 异步数据请求的速度，所以就会报错，接解决这个 bug 的方发我看过很多其他帖子，都说是在 在上一层 div 中加个 v-if 里面的条件就写那个数据对象，可是这样还是会报错，因为 就算是空对象，它也是为 true ，所以条件只能写判断对象键名的长度是否等于零 从而来判断对象中的数据加载过来没有，还有就是 不能用 v-show 因为v-show 是已经渲染，只是还没解析，而 v-if 在false的情况下是完全不存在的，更谈不上解析渲染了;

正确写法如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]  
这里值的说一下的是 Object.keys()，这个方法是获取到对象的所有键名；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]  
然后现在就可以看到浏览器控制台没报错了;

特别注意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]  
特别注意：空对象竟然也是 true，我就是在这里被坑惨了，一直以为空对象是false，好了，不说了，继续做项目去了，希望可以帮助到大家，我有啥没写明白的欢迎大家私信我，谢谢 ！！！

[转载：https://blog.csdn.net/qq\_43353619/article/details/104434562][https_blog.csdn.net_qq_43353619_article_details_104434562]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70]: /images/20221119/3d2a21c77752439189c6a7f02d6ce7f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210111172759855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210111172811357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210111172826855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210111172832497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_43353619_article_details_104434562]: https://blog.csdn.net/qq_43353619/article/details/104434562