React中实现简易自定义进度条进度到10%后运行异常是什么原因

问题根源 #

你的代码存在两个核心问题导致进度条运行异常：

• 定时器未清理：useEffect依赖percentage，每次percentage更新都会触发useEffect执行并创建新的setInterval，旧的定时器没有被清除，会同时存在大量定时器并发运行，互相覆盖percentage的赋值结果。
• 闭包捕获旧值：每个定时器的回调函数捕获的newPercentage是对应useEffect执行时刻的固定值，不是最新的percentage状态，大量定时器同时给percentage设置不同的旧值，最终会导致数值卡在固定区间无法继续上涨。

修复方案 #

推荐两种可靠的实现方式，二选一即可：

方案1：使用setTimeout实现（更适配现有逻辑） #

仅保留一个超时任务，每次状态更新后自动生成下一次更新任务，到100%自动停止：

useEffect(() => {
    // 进度到100%后停止更新
    if (percentage >= 100) return;
    const timer = setTimeout(() => {
        // 函数式更新直接拿到最新的state值，避免闭包问题
        setPercentage(prev => prev + 1);
    }, 1000);
    // 清理上一次的定时器，避免残留
    return () => clearTimeout(timer);
}, [percentage])

方案2：单setInterval实现（性能更优） #

仅在组件挂载时创建一次定时器，内部通过函数式更新读取最新状态，到100%自动销毁定时器：

useEffect(() => {
    const timer = setInterval(() => {
        setPercentage(prev => {
            if (prev >= 100) {
                clearInterval(timer);
                return prev;
            }
            return prev + 1;
        });
    }, 1000);
    // 组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(timer);
}, [])

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