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

Question

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

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

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

我应该使用 componentDidUpdate 来检查状态或 Prop 是否发生变化然后清除计时器，或者有更好的方法。

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

谢谢你的帮助:)

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>
        )
    }
}

Answer 1

在 componentWillUnmount 方法中清除超时的目的是“清理”，因此超时不会执行任何操作。如果您在 onClick 处理程序结束时清除超时，这些超时将永远不做任何事情，因为您已经在它们运行之前清除了它们。

只有当您不希望该代码运行时，您才真正需要清除超时。

所以这真的归结为一个问题:您想在什么情况下清除超时？看起来您可能想要清除 componentWillUnmount 的超时，因为如果您不这样做，它们将调用 this.setState。