Vuex踩坑记录Error in render: “TypeError: Cannot read property ‘xxxxx‘ of undefined“

269 阅读1分钟

image.png

image.png

image.png

遇到了功能没有问题但是控制台报红了

解决方案1.】:在uerdefultAddress调用前的div加上 v-if="uerDefaultAddress"

在上面一个div中添加v-if判断条件,如果info.supports取不到,则不加载该div即可解决。(注意,不能用v-show,v-show的机制是加载后,根据条件判断是否显示

image.png

【根本原因】:

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

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

所以上来加载userDefaultAddress时候还是一个空对象 find找不到 当渲染完成后才加载异步数据

解决方案2.】在return的数据这里加上一个空对象

userDefaultAddress(){
        // find查找数组当中符合条件的元素作为返回的结果,渲染是同步的,可能会拿不到
        return  this.addressInfo.find(item=>item.isDefault == 1)||{};
      },