莫名的Cannot read property ‘key’ of undefined

错误发现

  • 前几天写vue项目时,出现了一个莫名其妙的Cannot read property 'key' of undefined错误。

  • 项目采用Vue+vant+ts架构。在van-search输入框,输入任何字符,都会出现这个错误

错误跟踪.1

  • 跟踪调试了很久(大概是two hours later…),甚至跟踪到vue的源码里面去执行,找到遍历子控件的方法,发现遍历出来的子控件有false甚至undefined。但是跟踪执行也没用,完全不知道怎么产生的。

错误跟踪.2

  • 因为报错是加了一个van-search控件之后出现的,注释了van-search就没有了,因此尝试照着出错地方的格式又写了个页面,一个van-tabs嵌套van-tab,每个van-tab里面是一个van-search,写完执行并没有报错。

  • 因为之前有个项目也有这个结构,但是没有报错,对比两个项目,发现vant版本不一致,因此把新项目vant降级试了一下,然并卵。

  • 再仔细对比原来的页面,发现原页面是用了vue-property-decorator组件,遂把新页面也改成相同的方式,导入组件import {Vue, Component} from 'vue-property-decorator';这下终于出现错误了

  • 仔细看了文档,原来需要用@Component()修饰器修饰,给新页面加上之后,果然不报错了。

  • 哈哈终于找到原因了,给原页面也加上就行了。回到原页面一看傻眼了,是加了修饰器的。不过大概知道原因,再定位问题,就方便多了。

问题处理

  • 一一排查子组件,最终找到是在Footer组件里面没加这个修饰器,加上就对了

总结

  • 其实整个过程跟van-search组件没有任何关系,只是问题表现出是它导致的(一输入就报错),所以大部分时间都在调试van-search上面去了,结合报错信息,甚至给他加了各种key。

  • 一句@Component导致的超过3个多小时定位查找问题,这还是无意间发现了,要是没发现,估计整个通宵睡觉的时间都得搭进去。

  • 所以这篇文章水了一大篇,并不是想说明定位问题解决问题的方法,仅做记录,记下这个血泪的教训。

  • 也希望如果有同样遇到这个莫名其妙问题的人无意间看到这篇文章,可以少花一点时间去debug

vue-property-decorator 一定要加 @Component 修饰器

vue-property-decorator 一定要加 @Component 修饰器

vue-property-decorator 一定要加 @Component 修饰器

发表评论

电子邮件地址不会被公开。 必填项已用*标注