React + TypeScript实现倒计时数字小于10时补零显示

要实现数字小于10时显示两位格式（如09代替9），只需要添加一个简单的格式化函数，同时修复原代码中useEffect的依赖问题（避免重复创建定时器），具体修改如下：

1. 编写数字格式化函数 #

添加一个工具函数，将数字转换为两位字符串：

const formatTime = (num: number): string => {
  return num < 10 ? `0${num}` : `${num}`;
};

2. 修改渲染逻辑 #

在渲染时分用这个函数处理分钟和秒数：

<div className="timer">
  <p>
    {formatTime(minutes)}:{formatTime(seconds)}
  </p>
</div>

3. 修复useEffect依赖问题 #

原代码的useEffect没有设置依赖数组，会导致每次组件渲染都创建新的定时器，引发性能问题。需要添加[seconds, minutes]作为依赖，同时修正清理定时器的方法（原代码用clearInterval对应setTimeout是错误的）：

useEffect(() => {
  let timeInterval = setTimeout(() => {
    if (seconds > 0) {
      setSeconds(seconds - 1);
    }
    if (seconds === 0) {
      if (minutes === 0) {
        clearTimeout(timeInterval);
      } else {
        setMinutes(minutes - 1);
        setSeconds(59);
      }
    }
  }, 1000);
  
  return () => {
    clearTimeout(timeInterval);
  };
}, [seconds, minutes]);

完整修改后的代码 #

.timer{
  border: 1px solid red;
  padding: 1rem;
  width: 150px;
  height: 50px;
}

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

const CountdownTimer = () => {
  const [seconds, setSeconds] = useState<number>(59);
  const [minutes, setMinutes] = useState<number>(1);

  const formatTime = (num: number): string => {
    return num < 10 ? `0${num}` : `${num}`;
  };

  useEffect(() => {
    let timeInterval = setTimeout(() => {
      if (seconds > 0) {
        setSeconds(seconds - 1);
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearTimeout(timeInterval);
        } else {
          setMinutes(minutes - 1);
          setSeconds(59);
        }
      }
    }, 1000);

    return () => {
      clearTimeout(timeInterval);
    };
  }, [seconds, minutes]);

  return (
    <div className="timer">
      <p>
        {formatTime(minutes)}:{formatTime(seconds)}
      </p>
    </div>
  );
};

export default CountdownTimer;

说明：

• 格式化函数formatTime会自动为小于10的数字补前导零，确保显示格式统一。
• 修正了原代码中定时器清理的错误，setTimeout对应clearTimeout而非clearInterval。
• 添加useEffect的依赖数组，确保只有当秒数或分钟数变化时才重新创建定时器，避免不必要的性能开销。

内容的提问来源于stack exchange，提问作者h.m.p.frontendDeveloper