Javascript 在React中移除计时器的正确方法是什么。在执行onClick函数后创建它们时

我为我的英语不太好而道歉。因为我是新手，所以我需要一些帮助

比如说，我有一些onClick事件，在onClick函数中我设置了setTimeout或setInterval。我希望在功能完成后清除计时器

在React官方文档中，我们可以使用componentWillUnmount从setTimeout或setInterval中删除计时器。但是在我的代码中，我没有删除任何组件，因此componentWillUnmount不是调用

我应该使用componentDidUpdate来检查状态或道具是否已更改，然后清除计时器，或者有更好的方法

移除计时器的最佳方法是什么

谢谢你的帮助：）

从“React”导入React；
类应用程序扩展了React.Component{
状态={
索引：0
}
定时器=空；
下一步=（）=>{
计时器=设置超时（（）=>{
this.setState（（prevState）=>（{index:prevState.index+1}））；
}, 1500);
}
componentDidUpdate（prevProps、prevState）{
if（this.state.index！==prevState.index）{
clearTimeout（this.timer）；
}
}
render（）{
返回(
)
}
}

在

组件willunmount

方法中清除超时的目的是“清除”，使超时不起任何作用。如果清除

onClick

处理程序末尾的超时，这些超时将不会起任何作用，因为您在它们运行之前已经清除了它们

如果你不想让代码运行，你只需要清除一个超时

---

所以问题就归结为：在什么情况下你想清除超时？您可能希望清除组件willunmount上的超时，因为如果不清除超时，它们将调用this.setState

无需清除不再处于活动状态的计时器。使用setTimeout时，在执行回调后计时器停止。正如詹姆斯所提到的，清除计时器的唯一原因是阻止它执行。您的代码应该在没有componentDidUpdate部分的情况下工作。另外，请允许我指出，您的next（）函数应该更新state中的index属性，而不是timer属性。

我认为您可以使用控制器变量来检查update，如下所示：

class App extends React.Component {
constructor(){
    super();
    this.state = {
        intervalId : 0,
    currentCount:0
    }
}

doIt = () => {
var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
}

timer = () => {
var newCount = 0;//use this controller
    newCount = newCount + 1;
  this.setState({ currentCount: this.state.currentCount + newCount });
   if(newCount >= 1) { 
   clearInterval(this.state.intervalId);
   } 
}

  render() {
    return <div>Timer =  {this.state.currentCount} <p onClick={this.doIt}>clcik on me</p></div>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
有效期：0，
当前计数：0
}
}
doIt=（）=>{
var intervalId=setInterval（this.timer，1000）；
//将intervalId存储在状态中，以便以后可以访问：
this.setState（{intervalId:intervalId}）；
}
计时器=（）=>{
var newCount=0；//使用此控制器
newCount=newCount+1；
this.setState（{currentCount:this.state.currentCount+newCount}）；
如果（newCount>=1）{
clearInterval（this.state.intervalId）；
} 
}
render（）{
返回Timer={this.state.currentCount}
clcik on me
；
}
}
ReactDOM.render(
这取决于您对计时器的使用情况。React docs以这种方式指定它，因为组件中的计时器在组件卸载后无法更新任何内容。如果您需要在卸载前清除计时器，请随时进行清除。因此，我只想指出，由于您一次只保存一个计时器引用，因此您最好立即清除超时在再次设置之前（在
下一步
中），从而使componentDidUpdate检查变得不必要。这实际上还将修复一个可能的错误，即您无意中清除了刚才设置的超时，因为您正在根据索引更改进行清除。例如，您保存了计时器id、更新状态、CDU检查更新的索引，并在计时器过期之前清除。感谢您的帮助。在我的例子中，我需要在onClick处理程序中调用this.setState。如果我理解您的答案和Edgar Chávez的答案。当执行回调时，计时器停止并且不再活动。因此，即使我不清除我的例子中的计时器也可以。我可以从代码中删除this.timer。我问这个问题，因为我知道每次使用s时etTimeout或setInterval我们必须清除计时器。但可能我错了。感谢您的帮助。是的，您是对的，它应该是状态中的索引属性，我的错误：）
class App extends React.Component {
constructor(){
    super();
    this.state = {
        intervalId : 0,
    currentCount:0
    }
}

doIt = () => {
var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
}

timer = () => {
var newCount = 0;//use this controller
    newCount = newCount + 1;
  this.setState({ currentCount: this.state.currentCount + newCount });
   if(newCount >= 1) { 
   clearInterval(this.state.intervalId);
   } 
}

  render() {
    return <div>Timer =  {this.state.currentCount} <p onClick={this.doIt}>clcik on me</p></div>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);