React中如何停止setInterval()？定时GET请求无法终止问题

你遇到的问题核心是重复创建了多个定时器，但只清除了最后一个。具体来说：

• 当this.state.isSyncStart变为true时，每次componentDidUpdate触发都会调用getSynProcessState，而这个函数每次都会执行setInterval生成新的定时器，同时覆盖this.intervalID的值。
• 当isSyncStart变为false时，你清除的只是最后一次生成的定时器ID，之前创建的那些定时器并没有被清除，所以GET请求会持续发送。

我们需要从三个方面入手：避免重复创建定时器、仅在状态变化时触发操作，以及组件卸载时清理定时器。

1. 防止重复创建定时器 #

在getSynProcessState中，先检查是否已经存在活跃的定时器，如果有，先清除它再创建新的。这样就能保证同一时间只有一个定时器在运行。

2. 仅在状态切换时触发操作 #

在componentDidUpdate中，不要每次isSyncStart为true都调用getSynProcessState，而是通过对比prevState，只在isSyncStart从false变为true时启动定时器，从true变为false时清除定时器。

3. 组件卸载时清理定时器 #

为了避免内存泄漏，在组件卸载时必须清除定时器，这是React组件开发的最佳实践。

// 初始化intervalID为null，避免初始值混淆
intervalID = null;

getSynProcessState = () => {
    // 先清除已存在的定时器，防止重复创建
    if (this.intervalID) {
        clearInterval(this.intervalID);
    }
    // 创建新的定时器并保存ID
    this.intervalID = setInterval(() => {
        axios.get('http://mySite/data/')
            .then(res => {
                console.log(res.data);
                // 可选：根据返回数据判断同步是否完成，自动停止定时器
                // 比如 if (res.data.processCompleted) { this.setState({ isSyncStart: false }); }
            })
            .catch(err => {
                console.error('同步状态请求失败:', err);
                // 可选：请求失败时也可以停止定时器或做错误处理
            });
    }, 60000); // 注意：原代码是1秒一次，如果你要一分钟的话改成60000
}

componentDidUpdate(prevProps, prevState) {
    // 仅当isSyncStart从false变为true时，启动定时器
    if (this.state.isSyncStart && !prevState.isSyncStart) {
        this.getSynProcessState();
        console.log('componentDidUpdate: 同步已启动，开始轮询状态');
    } 
    // 仅当isSyncStart从true变为false时，清除定时器
    else if (!this.state.isSyncStart && prevState.isSyncStart) {
        clearInterval(this.intervalID);
        this.intervalID = null; // 重置ID，避免后续误操作
        console.log('componentDidUpdate: 同步已停止，清除轮询定时器');
    }
}

// 组件卸载时务必清除定时器，防止内存泄漏
componentWillUnmount() {
    if (this.intervalID) {
        clearInterval(this.intervalID);
        this.intervalID = null;
    }
}

• 你原代码里的定时器间隔是1000毫秒（1秒），如果需求是每隔一分钟发送请求，记得改成60000毫秒。
• 可以在请求的then回调里，根据返回的同步状态主动将isSyncStart设为false，实现自动停止定时器的效果，不需要手动触发状态变更。

内容的提问来源于stack exchange，提问作者Tùng Sơn