12月中旬项目中出现的几个bug解决方法的思考

这周做的项目遇到2个费了很多时间才解决的bug，解决之后，发现根本问题并不是什么很难的技术难点，都是因为自己在写代码的过程中，思维不够清晰。还有一个需要再提高的地方就是解决问题的思维，如何快速定位到问题。

第一个bug很严重：本地前后端联调没有问题，而且调的是和测试环境一样的接口，但是测试环境就是报length为undefined

和同事从晚上8点多一起找问题到晚上12点都没有解决好这个问题。问题出现前我做了一波这样的操作，改了一次代码然后提交到测试环境（自己本地没测试到位就提交了，就是最大的问题），然后就发现挂了。现在想想如果是老赵解决这个问题，他一定会问我刚刚改了些什么，然后会让我把刚刚改的改回去，再去排除bug。如果我们当初改这个bug的时候，是先这样思考的，那么我们也就不会为这个bug花那么多无用的时间了。最终定位到问题的时候，确实是我提交前改的那个变量写错了，这个变量不是一个数组。

如果真的想不起来自己刚改了什么，也应该是先去从那些调用了length的变量上去排除，将所有的可能的数组变量替换成[]一个空值再来判断。

回顾这个问题，想起一件有趣的事情。

第一个，测试环境有问题，但是本地没有问题，说明本地环境还是不行的，出了问题不报错，这是一个需要去思考看能否优化的点，本地环境是否能和测试环境保持一样的环境。至少本地环境能像测试环境一样有问题能在console中暴露出来。第二个，拿到这个问题，我第一个去检查传的数据是否正确，我定位了所有会调用到的方法，最后发现都可以一一执行，数据传递都正常但到最后还是会报length为undefined，我当时就蒙圈了。到底是因为什么原因？现在发现其实定位这个问题并不难，再多想想，拿到数据之后会干嘛？拿到数据当然就是去渲染dom啦，这里就应该怀疑是渲染dom出错了，问题就浮现水面了，dom上有个不是数组的变量读取了length，再去一一排除可能的数组变量就能解决问题了。

第二个bug：数据改变，需要重新触发dom渲染高度。采用js操作dom，重新设置元素高度，但是无效。

场景：切换月份获取当月的数据，对应的表格元素的高度要自适应内容的高度，表格的每一行有一个跨单元格的悬浮的div，这个div中包含内容，当前的行的表格单元格的高度要和这个div的高度保持一直。高度采用js计算，在刚开始进入这个页面的时候就会在等到拿到数据并渲染dom之后去调用这个js逻辑去读取表格中每一行包含的这个悬浮的div的高度，然后再去给对应行的表格的单元格设置对应高度。

按理说操作dom，重新给元素赋值高度是可以，但是不行的时候，是为什么不行？这个方案最后结果不是我们想要的，就要去排除是什么原因导致的不行，如果最后排除原因是方案不行就要换方案，没有排除原因都不能去想着换方案。

高度没有按预期去渲染，看下想要设置的数据是否是正确的，永远打印整个变量去检查数据，因为这次从数组中去读取数据就是打印的其中的部分数据，结果才迟迟没有定位到真的问题，最后发现数据读的总是前面部分的数据，定位到问题是切换月份没有置空之前数组中的数据。

总结：

  1、问题的表象不一定就是真的问题所在，比如第一个bug，看上去像是环境问题导致的，其实不是，只是本地也出错了没有把错误暴露出来，问题根本原因还是代码问题。

  2、解决问题的思路：数据渲染没按预期渲染，检查数据，从预期结果出发，先思考预期结果什么样，然后看看实际结果是什么，思考实际结果出现的原因，问题就浮现了。