【Vue】如何快速定位property of indefined错误

前言

Error in render: "TypeError: Cannot read properties of undefined (reading 'length')"
相信大家看到以上错误一定感觉很熟悉，这个错误是很多小伙伴们会经常遇到的错误，那么如果遇到这种错误如何快速定位错误呢，下面我将结合实例，为大家讲解快速定位这种错误的方法；

报错分析

首先看到控制台输出以上错误信息，直译过来是:不能获取正在阅读的length属性。也就是说在获取读取length属性时，读到的是undefined，往前推，就是有length属性的那个对象没有获取到。那么我们就可以直接定位错误在length前面的对象，在代码中找到与之匹配的语句如下图所示；

找到语句以后我们直接在控制台打印length前面的对象看看有没错误，结果发现输出undefined，如两张图所示

控制台

从以上测试分析，personList也获取不到，此时我们直接打印this,在控制台逐层查找，看看能不能找到length属性
在mounted函数内打印this后，控制台输出结果如下：

从控制台输出的结果可以看出，必须通过this.$store.state.personAbout.personList才能获取length属性。因此错误原因为少了personAbout，导致读取不到length属性；

快速定位错误总结

经过以上错误的分析，以后如果碰到以上的错误，直接在找==(reading ‘length’)==正在获取的属性前面的对象，直接在mounted函数内部打印，逐层找是因为哪个对象没有获取到

写在最后

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞