type
status
date
slug
summary
tags
category
icon
password
Property
Jul 11, 2023 03:54 PM
Text
每一句代码都很重要，有这种意识非常重要。它有可能是解决 bug 的关键所在。
接着上一篇短文的话题去聊。昨天遇到过一个问题，是关于点击事件的。在第一次点击事件发生后，可以获取到 SKU 的数据。但是，第二次点击的话，就获取不到 SKU 的数据了。
在一开始解决这个问题的时候，我的解决方式是凭借自己的经验，去反复调试代码，从而能够找到问题所在。但是后来经过三个小时的尝试，这种解决方法行不通。
为什么说行不通呢？因为不管怎么样去调试这个程序，还是找不到这个问题出现的根源。怎么说呢，我的思路是一直在用我过去的经验，然后去猜测大概的问题所在。但是，这个 SKU 弹窗组件对我来说就像一个黑盒。也就是，我不知道这个里边内部的具体的逻辑跟流程是怎么样的，只是在表面上一直观察、去打一些断点，根据自己的经验模型去猜测大概这个问题出在哪里。
后来发现效果并不好，为什么发现效果不好呢？因为我调试了三个小时也没有找到结果。后来到了晚上11点的时候洗完澡了，又开始调试这个程序。思路就是看看这个组件到底是怎么运行的。于是，我就一步一步去到这个组件的内部打断点，了解他的每一步程序大概是怎么样去执行的。
通过这种方法，找到了一个在正常情况下有数据的时候打印的日志。同时，也有一种异常情况，当第二次再去触发点击事件，没有数据的时候，也看到了打印的日志是什么样的。
经过对比，我发现有数据的时候，有一个函数 A 会被调用，但是在异常的情况下，A 函数不会被调用。于是我到这个组件的内部去翻代码。看一看有几个地方调用 A 噶函数，然后在这几个调用它的地方分别打印了日志。后来发现没有调用它的地方，我就开始去里边儿翻代码，然后发现有一个调用它的地方。于是，我在调它的地方，发现数据正常的时候，调用它的那个函数执行了；而没有数据的情况，就没有去调用它。
于是，我就去找那个函数。在找这个函数的时候，我想看看它又被谁调用了，结果一直没有找到。后来在没有办法的情况下，开始读这个函数的源码，发现在这个组件之中没有其他地方再调用这个函数。于是，我就开始研究这个函数，后来发现这个函数上面写了一行注释：说这是一个主动调用的方法。
这让我开始思考，如果不在这个组件内部调用的话，那它会不会像生命周期钩子函数那样，或者是外部的对象有可能会调用它，也就是专门供这个文件或者说模块之外的文件里的对象来调用它的。
于是找到使用这个组件的业务文件，果不其然，调用这个函数的对象，就在这个业务模块里边。业务文件里边有一个定义的变量对象调用了这个函数。
经过观察发现，业务文件里边在正常状态下，这个函数被调用了。但是在异常状态下，这个函数没有被调用。然后我在这个业务文件里边去查这个函数什么时候会被调用，什么时候不会被调用。
这个时候，我就发现在这个函数被调用的另外一个地方，也就是它的上一层。在这个函数上一层调用的地方，会有一个判断：如果一个标识符，在第一次执行的时候，会去调用它，但是调用它之后马上就会改为 true，这个时候就下一次不会再调动它，也就是说它在原本的逻辑里面只会被调用一次。
所以，这就是之前那个问题的根本原因所在，也就是为什么数据渲染的那块逻辑只调用一次，再后边怎么都不能被调用，就是因为这个业务组件里边做了这一层布尔值的设置。
找到这一段逻辑之后，在这里边进行了相应的代码修改，然后每次再点击的时候，都能像第一次点击一样，可以正常渲染出来数据。
到此，这个问题就解决了。解决这个问题给我的感悟是，如果整体或者说某一个思路不能让你解决你的问题，那么你就要深入到这个技术或者说逻辑的细节当中了，也就是，需要深入到这个黑盒当中。你要清楚你用的这个组件，假设你只是去用的话，它对你来说，相当于一个黑盒。为了解决更加细节的问题，你只有深入到这个黑盒中去，深入了解它细节，你才会发现更多的线索，同时找到问题的根本原因所在。
23.7.11
- 作者:NotionNext
- 链接:https://tangly1024.com/article/3f72bf01-1bd7-49ed-adf2-b9c5cf7cbda5
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。