ReactJs 重复重置间隔计时器

Question

我写了一个组件，login你可以输入你的电话号码然后得到你的 otp 代码，你可以更正你的电话号码，也可以在 30 秒后重新发送代码。几乎一切正常，除了当你点击正确的按钮时，计时器进入快速间隔，你可以按两三次正确的按钮，你会看到时间过得很快。我在重新发送按钮上遇到了这个问题，但我通过以下方式解决了：

this.state.resendTimer = this.timerInterval();

JSFiddle

要查看问题，1. 输入假电话号码，2. 单击正确，3. 再次输入假电话号码，单击按钮。重复这些两三遍，你会看到计时器运行得如此之快！但是我想将计时器重置为 30 并且每秒正常退出。

Answer 1

在重新开始之前，您需要清除您的间隔。

看一下这个...

constructor(props) {
  super(props);
  ...
        
  this.tm = 0;
}



timerInterval = () => {
  this.tm = setInterval(() => {
  ...
  }, 1000);
}

并清除间隔：

clearInterval(this.tm);

JSFiddle