2021-09-14

关于 Cannot read property ‘length’ of null 报错的解决办法

今天在写代码的时候，控制台打印了一行 Cannot read property ‘length’ of null的错误，代码如下
<div v-show="historyList.length > 0 && !showAuto" class="search-history-title"> <p>搜索历史</p> <van-icon class="delIcon" name="delete" size="20" @click="deletetips" /> </div>

if (localStorage.getItem()) { this.historyList = JSON.parse(localStorage.getItem('historyList')) }
前端调试发现依然解决不了问题，后来发现是在从本地存储中获取数据的name都没有写，粗心大意造成的失误。
改正后：
if (localStorage.getItem('historyList')) { this.historyList = JSON.parse(localStorage.getItem('historyList')) }
当然如果你所查找的数据条数为0的时候,后端返回给前端是null,此时必然报错Cannot read property ‘length’ of null.
这个解决办法: 如果后端的返回值为null,就需要我们在后端返回一个空的list数组