React.js定时器开发异常求助：数字跳变而非连续递减

问题原因 #

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

• 闭包陷阱：定时器回调里的seconds是组件首次渲染时的固定快照（值为59），每次执行setSeconds(seconds-1)都是计算59-1=58，因此只能完成一次更新，后续无法继续递减。
• 重复创建定时器：useEffect未设置依赖数组，组件每次渲染都会新建一个定时器，多个定时器同时修改state，导致数字跳变混乱。

修复代码 #

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(59);

  useEffect(() => {
    // 创建定时器实例
    const timerId = setInterval(() => {
      // 使用函数式更新获取最新state值
      setSeconds(prevSeconds => {
        // 秒数减至0时清除定时器并终止递减
        if (prevSeconds <= 1) {
          clearInterval(timerId);
          return 0;
        }
        return prevSeconds - 1;
      });
    }, 1000);

    // 组件卸载或重新渲染时清理定时器，避免内存泄漏
    return () => clearInterval(timerId);
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  // 格式化秒数为两位数字，例如0转为"00"
  const formattedSeconds = String(seconds).padStart(2, '0');

  return <div>{formattedSeconds}</div>;
}

export default Timer;

关键说明 #

• 函数式更新：setSeconds(prevSeconds => prevSeconds - 1)能确保每次都拿到最新的state值，彻底规避闭包导致的取值滞后问题。
• 定时器清理：useEffect的返回函数会在组件销毁或依赖变更时触发，及时清除定时器，防止内存泄漏和多实例冲突。
• 空依赖数组：保证useEffect仅在组件挂载时运行一次，不会重复创建定时器。
• 数字格式化：通过padStart(2, '0')将单数字秒数转换为两位格式，满足最终显示"00"的需求。

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