React Native视频流场景下时分秒计时器实现求助

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

• 依赖seconds状态判断进位完全错误：React状态更新是异步的，定时器回调里的seconds始终是初始值（0），永远触发不了seconds === 10的逻辑，而且正常逻辑应该是60秒进1分钟，不是10秒。
• clearInterval(setSeconds(0))用法混乱：setSeconds是状态更新函数，不是定时器ID，重置秒数应该通过状态更新实现，不能传给clearInterval。
• 没保存定时器ID：后续无法正确停止计时器，容易导致内存泄漏或计时器失控。
• 缺少小时进位逻辑：分钟到60时没有更新小时并重置分钟。

修复后的完整实现（React环境） #

import { useState, useRef } from 'react';

function StreamTimer() {
  const [seconds, setSeconds] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [hours, setHours] = useState(0);
  // 用useRef保存定时器ID，确保跨渲染周期能访问到
  const timerRef = useRef(null);

  // 点击推流按钮时启动计时器
  const startStreamTimer = () => {
    // 先清除已有定时器，防止重复启动
    if (timerRef.current) clearInterval(timerRef.current);
    
    timerRef.current = setInterval(() => {
      setSeconds(prevSec => {
        // 秒数满60，重置为0并触发分钟更新
        if (prevSec === 59) {
          setMinutes(prevMin => {
            // 分钟满60，重置为0并触发小时更新
            if (prevMin === 59) {
              setHours(prevHour => prevHour + 1);
              return 0;
            }
            return prevMin + 1;
          });
          return 0;
        }
        return prevSec + 1;
      });
    }, 1000);
  };

  // 停止推流时清除计时器
  const stopStreamTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  return (
    <div>
      <button onClick={startStreamTimer}>开始推流</button>
      <button onClick={stopStreamTimer}>停止推流</button>
      {/* 补零处理，让时间显示为两位数字格式 */}
      <div className="timer-display">
        {hours}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}
      </div>
    </div>
  );
}

export default StreamTimer;

关键优化点： #

• 用useRef存储定时器ID：保证组件重新渲染后仍能正确获取到定时器实例，避免无法停止计时器的问题。
• 采用状态的函数式更新：setSeconds(prevSec => ...)能拿到最新的状态值，彻底解决异步更新导致的判断失效问题。
• 层级进位逻辑：从秒到分钟再到小时，每一级满额后自动触发下一级更新并重置当前值，符合正常计时逻辑。
• 数字补零：通过padStart(2, '0')让单数字的时间显示为两位（比如5秒显示为05），提升视觉体验。

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