完美解決vue中報(bào)錯(cuò) “TypeError: Cannot read properties of null (reading ‘forEach‘)“

報(bào)錯(cuò)截圖：

報(bào)錯(cuò)原因：

上圖的報(bào)錯(cuò)翻譯過(guò)來(lái)其實(shí)就是無(wú)法讀取 null 的屬性。簡(jiǎn)單來(lái)說(shuō)就是循環(huán)遍歷的數(shù)組是 null 值，而一旦循環(huán)遍歷的數(shù)組為 null 值的同時(shí)再使用 forEach 方法遍歷數(shù)組就會(huì)出現(xiàn)此報(bào)錯(cuò)。

解決方案：

知道報(bào)錯(cuò)的原因，那么問(wèn)題也就能迎刃而解了，由于之前是因?yàn)?null 值的問(wèn)題才導(dǎo)致循環(huán)遍歷報(bào)錯(cuò)，那么我們完全可以在進(jìn)入循環(huán)遍歷之前將要循環(huán)遍歷的數(shù)組做一個(gè)非空判斷，如下代碼：

未修改代碼：

res.data.forEach((item) => {
  // 執(zhí)行操作
});

加上非空判斷后：

// 循環(huán)遍歷之前加上非空判斷
if (res.data) {
  res.data.forEach((item) => {
    // 執(zhí)行操作
  });
}

補(bǔ)充：vue 報(bào) Cannot read property ‘prototype‘ of undefined

報(bào)錯(cuò)信息： Cannot read property 'prototype' of undefined

這個(gè)錯(cuò) 可能是 js 引入順序問(wèn)題造成的 也有可能是 引入 elemen-ui造成的 。還有可能是 其它 問(wèn)題造成的。

vue3 需要引入 element-plus ，引入 element-ui 也會(huì)報(bào)這個(gè)錯(cuò)

引入順序問(wèn)題：

在 public/index.html 中引入 ElementUI 的 js 時(shí)，前面沒(méi)有加 Vue.js 的引入。這里我們?cè)谇懊婕尤?Vue.js 的引入即可。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.9.2/index.js"></script>

解決方案：

代碼報(bào)錯(cuò)主要是因?yàn)関ue引用順序不當(dāng)導(dǎo)致的，或者是webpack打包時(shí)使用import引入vue,element卻使用script引入也會(huì)出現(xiàn)這個(gè)問(wèn)題 （引入js的順序不合適）。

將vue引用放在最前面可避免這個(gè)問(wèn)題。

先引入 vue 或者 vue.js 如果是 ui庫(kù) 要先引入 js再引入 css 。

到此這篇關(guān)于完美解決vue中報(bào)錯(cuò) “TypeError: Cannot read properties of null (reading ‘forEach‘)“的文章就介紹到這了,更多相關(guān)vue中報(bào)錯(cuò)Cannot read properties of null 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論