在created()鉤子函數(shù)請(qǐng)求接口并報(bào)錯(cuò)數(shù)據(jù)，渲染在dom元素是可以正常渲染，但是在開(kāi)發(fā)者工具中就會(huì)報(bào)錯(cuò) Error in render: "TypeError: Cannot read properties of undefined (reading 'nickname')"
?意思是 在created調(diào)用封裝請(qǐng)求接口的函數(shù) ，獲取到的數(shù)據(jù)再給保存起來(lái)并渲染到dom元素，不過(guò)數(shù)據(jù)渲染之前 dom元素會(huì)先渲染一次到渲染獲取到的數(shù)據(jù)。那么就會(huì)導(dǎo)致渲染獲取的數(shù)據(jù)會(huì)未定義，沒(méi)有這個(gè)屬性/對(duì)象。
說(shuō)通俗點(diǎn)就是三層表達(dá)式a.b.c，在對(duì)象a中沒(méi)有對(duì)象b，那么讀取對(duì)象a.b.c中的值，自然會(huì)報(bào)錯(cuò)。如果是兩層表達(dá)式a.b則不會(huì)報(bào)錯(cuò)，返回的是undefined。
明白了原因之后上手排查代碼發(fā)現(xiàn)果然下面vue模板代碼中出現(xiàn)了三層表達(dá)式，十分可疑，出錯(cuò)的地方應(yīng)該就在這里。
原因：
我們發(fā)現(xiàn)這里的 list 是vuex中state管理加載的數(shù)據(jù)，異步調(diào)用顯示，然后vue渲染機(jī)制中：
異步數(shù)據(jù)先顯示初始數(shù)據(jù)，再顯示帶數(shù)據(jù)的數(shù)據(jù)，
所以上來(lái)加載 list 時(shí)候還是一個(gè)空對(duì)象如下：
當(dāng)渲染完成后，才加載異步數(shù)據(jù)
所以在渲染時(shí)，出現(xiàn)的三層表達(dá)式在list中取 list 的 user 屬性是不存在，再在這個(gè)對(duì)象中取其他值自然會(huì)報(bào)錯(cuò)，但是渲染完成后，list中的值加載好了，自然可以取到，這也就解釋了為什么界面正常顯示，但開(kāi)發(fā)者工具會(huì)報(bào)錯(cuò)的原因
?
解決方法：
使用 v-if 來(lái)進(jìn)行判斷
?
判斷是否有l(wèi)ist.user這個(gè)屬性或等于undefined，dom渲染前沒(méi)有這個(gè)屬性會(huì)銷(xiāo)毀，dom渲染之后有這個(gè)會(huì)顯示。?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-420328.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-420328.html
到了這里，關(guān)于【Vue】- 報(bào)錯(cuò) Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![解決：[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined (reading ‘matched‘)“](https://imgs.yssmx.com/Uploads/2024/02/524841-1.png)
![[Vue warn]: Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘toggleRowSe](https://imgs.yssmx.com/Uploads/2024/02/533012-1.png)
![[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)](https://imgs.yssmx.com/Uploads/2024/01/799764-1.png)
![[Vue warn]: Error in callback for watcher “l(fā)ss“: “TypeError: Cannot read properties of undefined](https://imgs.yssmx.com/Uploads/2024/02/727492-1.gif)
