React组件卸载时如何清除setInterval定时器？

你的代码存在几个关键错误，导致组件卸载时无法正常清除定时器：

1. 命名冲突：你将状态更新函数命名为setTimeout，直接覆盖了浏览器内置的setTimeout函数，彻底打乱了定时器逻辑。
2. 定时器类型误用：你需要的是5秒后执行一次任务，应该用setTimeout（单次延迟执行）而非setInterval（重复执行）。
3. 清理逻辑失效：初始状态timeout为false，且useEffect依赖数组为空，后续状态更新不会触发清理函数更新，clearInterval(false)本身也没有任何作用。
4. 定时器ID存储错误：你把setInterval的返回值传给状态更新函数，但状态更新是异步的，导致timeout无法及时获取正确的定时器ID。

正确实现代码 #

import { useState, useEffect } from 'react';
import { connect } from 'react-redux';

const AnswerScreen = (props) => {
    // 重命名状态，避免和内置函数冲突
    const [timerId, setTimerId] = useState(null);

    // 组件卸载或timerId变化时，清除对应定时器
    useEffect(() => {
        return () => {
            if (timerId) {
                clearTimeout(timerId);
            }
        };
    }, [timerId]);

    const itemClickHandler = (index, value) => {
        // 先清除已有定时器，避免重复触发
        if (timerId) {
            clearTimeout(timerId);
        }
        // 创建单次定时器，存储ID到状态
        const id = setTimeout(() => {
            props.doSomethingImportant();
        }, 5000);
        setTimerId(id);
    };

    return (
        <div onClick={() => itemClickHandler(3, 4)}>CLICK ME</div>
    );
};

export default connect(null, null)(AnswerScreen);

关键修复说明 #

• 规避命名冲突：将状态变量改为timerId，更新函数改为setTimerId，不再覆盖内置API。
• 使用正确定时器：用setTimeout实现单次延迟执行，匹配你的业务需求。
• 动态绑定清理逻辑：useEffect依赖数组加入timerId，每次定时器ID变化时，都会生成新的清理函数，确保卸载时能拿到最新的有效ID。
• 防止重复触发：点击按钮时先清除已有定时器，避免用户多次点击导致多个定时器并行运行。

内容的提问来源于stack exchange，提问作者torete