pycharm修正代码_我最新的错误修正：或者，我是如何在别人的代码中摸索的

最新推荐文章于 2023-04-19 12:36:28 发布

cumifi2519

最新推荐文章于 2023-04-19 12:36:28 发布

阅读量436

点赞数

文章标签： java react python javascript js ViewUI

原文链接：https://www.freecodecamp.org/news/my-latest-bugfix-or-how-i-went-spelunking-in-someone-elses-code-2afb536504ed/

版权

pycharm修正代码

by Tiffany White

蒂芙尼·怀特(Tiffany White)

我最新的错误修正：或者，我是如何在别人的代码中摸索的 (My latest bugfix: or, how I went spelunking in someone else’s code)

I love CodeSandbox. It has pretty much replaced CodePen for me unless I am fiddling around with CSS or freeCodeCamp front-end projects.

我喜欢CodeSandbox 。除非我不喜欢CSS或freeCodeCamp前端项目，否则它几乎已经替代了CodePen。

I like going through the sandboxes and picking out different ones to look at, take apart, and figure out how they work.

我喜欢浏览沙箱并挑选不同的沙箱进行查看，分解并弄清楚它们的工作方式。

While going through React Tutorial for Beginners by Kent C. Dodds on Egghead.io, I decided I would look for sandboxes that correlated with the course, as I was using Codesandbox to build out the stopwatch we were building in that course.

在Egghead.io上浏览 Kent C. Dodds的《面向初学者的React教程》时，我决定寻找与该课程相关的沙盒，因为我正在使用Codesandbox构建我们在该课程中构建的秒表。

I found a sandbox which I forked and found to be buggy.

我找到了一个我分叉的沙箱，发现它是越野车。

Why didn’t the stopwatch work? Glancing at the code for a few seconds, I saw some obvious problems right away.

为什么秒表不起作用？看了几秒钟的代码，我立刻看到了一些明显的问题。

Here is an example of the stopwatch being broken:

这是秒表损坏的一个示例：

错误修正1 (Bugfix 1)

The first thing I noticed was on line 7:

我注意到的第一件事是在第7行：

Date.now() needs parentheses. Date is an an object constructor with .now() being a method. When we click on the start button, React doesn’t know what to do here; we aren’t setting the state of lapse to be a number, which we expect. By adding the parentheses, we get the start button to work. No more NaNms.

Date.now()需要括号。 Date是一个对象构造函数，其中.now()是一个方法。当我们点击开始按钮时，React不知道该怎么做。我们没有将lapse状态设置为我们期望的数字。通过添加括号，我们可以使用开始按钮。没有更多的NaNms 。

But now we have another problem: the timer won’t stop.

但是现在我们还有另一个问题： 计时器不会停止 。

I also removed the console.log(Math.random()); because I felt it was unnecessary.

我还删除了console.log(Math.random()); 因为我觉得没有必要。

错误修正2：让秒表停止并清除 (Bugfix 2: Getting the Stopwatch to Stop and Clear)

Each time the button is clicked, we set the state to either running or lapse. The timer runs when we click start but clicking stop or clear doesn’t seem to work. How can we fix this?

每次单击按钮时，我们都将状态设置为running或lapse 。当我们单击“ start时，计时器start运行，但单击“ stop或“ clear ”似乎不起作用。我们该如何解决？

We can create a timer update function that accepts the current state. We can accomplish this by using native DOM APIs such as setInterval() and clearInterval(). We can run conditional logic to see if the timer is running:

我们可以创建一个接受当前状态的计时器更新功能。我们可以通过使用本机DOM API(例如setInterval()和clearInterval()来完成此操作。我们可以运行条件逻辑来查看计时器是否正在运行：

and use Date.now() to get the timestamp in ms, and assign it a startTime variable to compare the current time to the amount of time that has passed. When we click the start button, it sets the startTime to the current timestamp. We also need to return a new state as state is not mutable.

并使用Date.now()获取以毫秒为单位的时间戳，并为其分配一个startTime变量，以将当前时间与经过的时间进行比较。当我们单击开始按钮时，它将startTime设置为当前时间戳。我们还需要返回一个新状态，因为状态是不可变的。

Okay so this partially works. But as you can see below, if I click clear while the stopwatch timer is running, it doesn’t clear the timer, and it also doesn’t allow me to stop the timer, either.

好吧，这部分起作用。但是正如您在下面看到的那样，如果我在秒表计时器运行时单击clear ，则它不会清除计时器，并且也不允许我停止计时器。

How do we fix this particular bug?

我们如何解决这个特定的错误？

If we look back at the previous code, we can see we are using clearInterval() to reset the stopwatch timer. In our current iteration, our handleOnClear method is just setting the state without clearing the previous state.

如果回头看前面的代码，可以看到我们正在使用clearInterval()重置秒表计时器。在当前的迭代中，我们的handleOnClear方法仅设置状态而不清除先前的状态。

We can fix this by adding clearInterval() and passing in the timer function to the handleOnClear method to clear the state.

我们可以通过添加clearInterval()并将计时器函数传递给handleOnClear方法来清除状态来解决此问题。

This will give us the results we want.

这将给我们我们想要的结果。

潜在的问题？ (Potential Problem?)

There is a memory leak in this particular iteration. The timer will run until it is explicitly stopped in the DOM. We can use a React lifecycle method to stop all processes in the DOM when this component is mounted or unmounted.

在此特定迭代中存在内存泄漏。计时器将一直运行，直到在DOM中显式停止为止。当安装或卸载此组件时，我们可以使用React生命周期方法来停止DOM中的所有进程。

For this we can use componentWillUnmount to tell React to unmount the component once it is done rendering.

为此，我们可以使用componentWillUnmount告诉React一旦完成渲染就卸载组件。

思想和结论 (Thoughts and Conclusions)

I find it much more enjoyable fixing other people’s bugs than my own. This was a fun exercise and I plan on doing it more regularly and blogging about it.

我发现比其他人更容易修复他人的错误。这是一个有趣的练习，我计划更定期地进行此操作并撰写博客。

This stopwatch is a stupid simple component but if you are just scratching the surface of React like I am, I am sure digging into something like this stopwatch and figuring out how it works is an excellent exercise and use of one’s time.

这个秒表是一个愚蠢的简单组件，但是如果您像我一样只是在刮擦React的表面，我相信深入研究像这样的秒表并弄清楚它是如何工作的，这是一次出色的锻炼，并且是在浪费时间。