VUE TypeError: Cannot read properties of null (reading 'id')

5,937 阅读2分钟

问题

  • 我需要展示一个学校详情页,页面中有学校地图和其他的学校列表,点击其他学校会跳转刷新本页面。
  • 当我点击进行显示其他学校信息再返回的时候,创建地图就会报错: TypeError: Cannot read properties of null (reading 'id')

过程

在开发过程中时不时就会遇到之类的问题:

  • Cannot read property '***' of undefined.,
  • Cannot read properties of null (reading '***') 大多数的时候都是自己的不认真造成的失误,但是这次因为使用的是vue+腾讯地图,我前期一直怀疑是这两者之一的问题。 会不会vue携带不同参数路由到本组件页面我哪里写错了,还是腾讯地图文档没有看仔细遗漏了什么,但是各种百度尝试都没有解决。

解决

最难受的就是不清楚报错的原因,在new TMap.Map时报错,都没有用我定义的属性,更不知道从何改起。于是各种百度,但是没有找到相同的使用场景下的报错解决方法,直到在掘金上看到一篇关于 避免那些可恶的 "cannot read property of undefined" 错误 的文章,然后静下心想了下:

报错信息的意思是:正在去读id的这个属性,但是没办法读取null的id。 这个null是什么,也没有使用我定义的属性,等等......

创建地图需要通过id绑定一个<div>,那就是:在创建地图时进行id绑定的div是不存在喽?打印一下果然underfunded。清楚问题源头是什么,剩下的就好解决了,涉及业务逻辑问题,我就不赘述了。

思考

之所以记录下来,就是想提醒自己,在开发过程中,遇到问题首要还是要冷静下来仔细思考为什么,不能直接复制百度找答案。像这个报错,其实稍微思考一下答案就显而易见了,报错信息指示的也很明显。而愚蠢的我做了什么,放弃思考直接百度,说出来真是丢人丢到家了,无颜面对江东父老啊

最后:仅以此贴提醒自己,也提醒那些刚踏上这条道路的新手小白。