React函数内状态未触发渲染 倒计时显示卡在09:59问题求助

• 核心单位不匹配：counter存储的是毫秒级时间戳，但setInterval每秒仅对counter做减1操作，而非对应1秒的1000毫秒。10分钟总时长对应600000毫秒，要走到9分59秒对应的599000毫秒需要连续减1000次，也就是真实时间流逝1000秒（约16.7分钟）显示才会跳动一次，视觉上就会表现为卡在09:59不动，控制台打印counter能看到数值持续变化，但变化幅度不足以触发时间格式的显示变更。
• 定时器逻辑冗余：useEffect依赖设置为[counter]，每次counter变动都会销毁旧定时器、创建新定时器，既造成不必要的性能损耗，也容易引发定时器漂移、清理不及时的内存泄漏问题。
• 实例重复创建：audioElement和普通变量timer直接定义在组件函数体中，每次组件重渲染都会重新生成Audio实例、重置timer引用，存在内存泄漏和逻辑异常风险。
• 隐式类型隐患：下拉框返回的e.target.value是字符串类型，直接参与数值计算虽然会被隐式转换，但边界场景下容易出现NaN异常；初始counter设为null，传入时间转换函数时会被隐式转为0计算，存在边界问题。
• 双定时器不同步：额外用setTimeout做结束提醒，和倒计时的setInterval互相独立，很容易出现时间不同步的问题。

import './App.css';
import { useEffect, useState, useRef } from 'react';
import sound from './assets/1.wav';

function App() {
  const [time, setTime] = useState(10);
  const [counter, setCounter] = useState(0);
  // 用ref存储持久化实例，避免重渲染重复创建
  const audioElement = useRef(new Audio(sound));
  const timerRef = useRef(null);

  useEffect(() => {
    // 剩余时间大于0时启动倒计时
    if (counter > 0) {
      timerRef.current = setInterval(() => {
        // 核心修复：每秒减去1000毫秒
        setCounter(prev => prev - 1000);
      }, 1000);
    }
    // 倒计时归零时触发提醒
    if (counter === 0 && timerRef.current) {
      clearInterval(timerRef.current);
      alertDone();
    }
    // 组件卸载时清理定时器
    return () => clearInterval(timerRef.current);
  }, [counter]);

  const setTimer = (e) => {
    e.preventDefault();
    // 启动新倒计时前先清除旧定时器
    clearInterval(timerRef.current);
    // 显式转换为数字计算总毫秒数
    const totalMs = Number(time) * 60 * 1000;
    setCounter(totalMs);
  };

  const alertDone = () => {
    audioElement.current.play();
    // 保留原有弹窗逻辑，注意部分浏览器会拦截非用户主动触发的窗口打开
    window.open('http://localhost:3000/', '', 'popup');
    window.close();
  };

  function padTo2Digits(num) {
    return num.toString().padStart(2, '0');
  }

  function convertMsToTime(milliseconds) {
    let seconds = Math.floor(milliseconds / 1000);
    let minutes = Math.floor(seconds / 60);
    let hours = Math.floor(minutes / 60);

    seconds = seconds % 60;
    minutes = minutes % 60;
    hours = hours % 24;

    return `${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
  }

  return (
    <div className='App'>
      <header className='App-header'>
        <form onSubmit={setTimer}>
          <select className='text-black' onChange={(e) => setTime(e.target.value)} defaultValue={10}>
            <option value='1'>1 Min</option>
            <option value='10'>10 Min</option>
            <option value='20'>20 Min</option>
            <option value='30'>30 Min</option>
            <option value='40'>40 Min</option>
            <option value='50'>50 Min</option>
            <option value='60'>60 Min</option>
          </select>
          <button>Set</button>
          <div>Countdown: {convertMsToTime(counter)}</div>
        </form>
      </header>
    </div>
  );
}

export default App;

• 修正时间计算单位，每秒减去1000毫秒，保证显示每秒正常跳动
• 用useRef存储Audio实例和定时器ID，避免重渲染导致的实例丢失和重复创建
• 移除冗余的setTimeout逻辑，直接通过判断counter === 0触发结束提醒，保证逻辑同步
• 新增旧定时器清理逻辑，避免重复点击Set按钮时启动多个定时器导致倒计时速度异常
• 给表单控件加默认值，显式做类型转换，规避边界异常

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