Error in render: "TypeError: Cannot read property '0' of undefined"”渲染錯誤問題


【前提】:

搭建項目商家詳情頭部時,能夠完整渲染出整體頭部界面無問題,但開發者工具仍然報出“Error in render: "TypeError: Cannot read property '0' of undefined”錯誤,具體如下

 

【解決過程】:

首先Google翻一下:

 

見文之意:這里的意思就是模板在渲染時候,讀取對象中的某個對象的屬性值時,這個對象不存在,說通俗點就是三層表達式a.b.c,在對象a中沒有對象b,那么讀取對象a.b.c中的值,自然會報錯。如果是兩層表達式a.b則不會報錯,返回的是undefined。

明白了原因之后上手排查代碼發現果然下面vue模板代碼中果然出現了三層表達式,十分可疑,出錯的地方應該就在這里,不過為什么呢?

 

【根本原因】:

我們發現這里的info是vuex中state管理加載的數據,異步調用顯示,然后vue渲染機制中:

異步數據先顯示初始數據,再顯示帶數據的數據,

所以上來加載info時候還是一個空對象如下

 

當渲染完成后,才加載異步數據如下:

 

所以在渲染時,出現的三層表達式在info中取support[0]數組中的小標為0的對象還不存在,再在這個對象中取其他值自然會報錯,但是渲染完成后,info中的值加載好了,自然可以取到,這也就解釋了為什么界面正常顯示,但開發者工具會報錯的原因。

【解決方案】:

在上面一個div中添加v-if判斷條件,如果info.supports取不到,則不加載該div即可解決。(注意,不能用v-show,v-show的機制是加載后,根據條件判斷是否顯示)

 

原文鏈接:https://blog.csdn.net/edc3001/article/details/86833558


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM