解决TypeError: Cannot read properties of null (reading ‘0’)报错

文
章
目
录

• 解决办法

vue前端页面发出请求时发现报错如下：TypeError: Cannot read properties of null (reading ‘0’)，看下图：

定位到报错的代码是如下：

let beginTime = this.overviewQuery[0]
let endTime = this.overviewQuery[1]

而报错原因就是因为overviewQuery这个变量，而overviewQuery与el-date-picker日期组件通过v-model绑定，当el-date-picker日期组件点击小叉子图标清空日期时，会将绑定的overviewQuery置为null，从而导致了以上获取数组日期值时报错：TypeError: Cannot read properties of null (reading ‘0’)。

因此总结下原因就是数组变量为null导致通过角标获取用数组元素报错。

解决办法

知道了原因，解决办法很简单，对该变量加一层为null的判断即可，当变量不为空时再去获取数据：

if (this.overviewQuery) {
    let beginTime = this.overviewQuery[0]
    let endTime = this.overviewQuery[1]
}

然后再去运行就不会报错了，问题解决。