React中useEffect计时器问题：页面加载即启动，点击按钮重置

问题根源 #

1. 页面刷新即启动计时器：useEffect的依赖是handleClick，而handleClick在每次组件渲染时都会重新创建，导致组件挂载后立即触发useEffect启动定时器。同时setInterval写法错误——直接调用setTime(new Date())会立即执行一次，而非每秒执行，定时器实际未按预期工作。
2. 点击按钮重置计时器：handleClick中启动计时器时重复设置Time和curTime为当前时间，导致计时器被强制重置；且setisStart(!isstart)是异步操作，判断逻辑依赖旧状态值，逻辑混乱。

修复后的代码 #

import { useState, useEffect } from "react";

function Timer() {
  // 记录计时器开始时间
  const [startTime, setStartTime] = useState(null);
  // 记录当前时间，用于实时计算差值
  const [currentTime, setCurrentTime] = useState(null);
  const [isRunning, setIsRunning] = useState(false);

  function handleClick() {
    if (!isRunning) {
      // 启动计时器：记录开始时间，启动定时器
      setStartTime(new Date());
      setCurrentTime(new Date());
      setIsRunning(true);
    } else {
      // 停止计时器
      setIsRunning(false);
    }
  }

  useEffect(() => {
    let intervalId;
    if (isRunning) {
      // 每秒更新当前时间
      intervalId = setInterval(() => {
        setCurrentTime(new Date());
      }, 1000);
    }
    // 组件卸载或isRunning变化时清除定时器
    return () => clearInterval(intervalId);
  }, [isRunning]);

  // 计算已运行时长
  const calculateDuration = () => {
    if (!startTime || !currentTime) return "00:00:00";
    const diff = currentTime - startTime;
    const hours = Math.floor(diff / 1000 / 60 / 60) % 24;
    const minutes = Math.floor(diff / 1000 / 60) % 60;
    const seconds = Math.floor(diff / 1000) % 60;
    // 补零格式化
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  };

  return (
    <>
      <div>{calculateDuration()}</div>
      <button onClick={handleClick}>{isRunning ? 'Stop' : 'Start'}</button>
    </>
  );
}

export default Timer;

关键优化点 #

• 状态简化：仅保留startTime（开始时间）、currentTime（当前时间）、isRunning（运行状态）三个状态，逻辑更清晰。
• 定时器控制：useEffect依赖isRunning，仅在计时器启动时创建定时器，停止时自动清除，避免页面加载即启动的问题。
• 点击逻辑修正：启动时记录开始时间，停止时仅切换状态，不再重置计时器；异步状态更新的逻辑问题也得到解决。
• 格式化输出：使用padStart补零，让时间显示更规范。

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