React Hooks倒计时双setInterval方案问题：分钟不更新排查

你的代码存在两个核心问题： #

1. useEffect无依赖数组，导致定时器被频繁创建和销毁
   你没有给useEffect设置依赖数组，组件每次更新（比如每秒更新秒数时）都会重新执行useEffect，每次执行都会创建新的两个定时器，同时立即清理上一次创建的定时器。这就导致那个60秒的minuteInterval根本没机会运行到60秒就被销毁了，自然无法更新分钟数。

2. 分钟更新逻辑依赖闭包旧值，且分秒不同步
   即便minuteInterval能触发，它里的minutes是闭包捕获的初始值29，每次执行setMinutes(minutes - 1)只会把分钟设为28，之后再触发的话还是用旧的29计算，不会继续递减。另外，用两个独立定时器分别管理分和秒，很容易因为定时器精度问题出现分秒不同步的情况。

修正后的代码： #

import React, { useEffect, useState } from "react";

const Timer = () => {
  const [minutes, setMinutes] = useState(29);
  const [seconds, setSeconds] = useState(59);

  useEffect(() => {
    const timerInterval = setInterval(() => {
      setSeconds(prevSeconds => {
        if (prevSeconds - 1 < 0) {
          // 秒数归零时更新分钟，并重置秒数
          setMinutes(prevMinutes => prevMinutes - 1);
          return 59;
        }
        return prevSeconds - 1;
      });
    }, 1000);

    return () => clearInterval(timerInterval);
  }, []); // 空依赖数组，仅组件挂载时执行一次

  return (
    <div>
      {minutes === 0 && seconds === 0 ? null : (
        <h1>
          {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
        </h1>
      )}
    </div>
  );
};

export default Timer;

修正说明： #

• 只用一个定时器统一管理秒数更新，当秒数即将小于0时，同步更新分钟并重置秒数，避免分秒不同步。
• 使用函数式更新（prevSeconds、prevMinutes）确保每次拿到最新的状态值，规避闭包陷阱。
• 给useEffect添加空依赖数组，让定时器仅在组件挂载时创建一次，避免频繁销毁重建。

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