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

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

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

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

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

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

谢谢您的帮助 ：）

import React from "react";

class App extends React.Component {

    state = {
        index: 0
    }

    timer = null;

    next = () => {
        timer = setTimeout(() => {
           this.setState((prevState) => ({index: prevState.index + 1}));
        }, 1500);
    }

    componentDidUpdate(prevProps, prevState){
        if(this.state.index !== prevState.index){
            clearTimeout(this.timer);
        }
    }

    render(){
        return(
         <i class="fas fa-arrow-left" onClick={this.next}></i>
        )
    }
}

最佳答案

清除componentWillUnmount方法中的超时的目的是为了“清除”超时，因此超时不会执行任何操作。如果您在onClick处理程序的末尾清除超时，则这些超时将永远不会执行任何操作，因为您已在运行前清除了这些超时。

如果您不希望运行该代码，则只需要清除超时即可。

因此，真正的问题在于：您想在什么情况下清除超时？似乎您可能想清除componentWillUnmount上的超时，因为如果不这样做，他们将调用this.setState。