React中使用moment.js如何在页面渲染时启动2分钟倒计时

你原有代码无法正常倒计时的核心原因是，timeBetween是写死的固定静态值，没有和实时更新的时间做差值计算，所以页面上的数字永远停在初始的2分0秒不会变动。

核心修改逻辑 #

• 页面首次渲染时，记录「当前时间+2分钟」作为倒计时终点
• 每秒计算当前时间和终点的时间差，得到实时剩余的分、秒数
• 倒计时走到00:00时自动清除定时器，避免无效运行
• 增加补零逻辑，保证分、秒始终以两位格式展示

调整后可直接运行的完整代码 #

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

export default function CountdownMonths(){
  // 初始化时记录倒计时结束时间点：当前时间加2分钟
  const [endTime] = useState(moment().add(2, 'minutes'));
  // 存储实时剩余时长，初始值为2分钟
  const [remainingTime, setRemainingTime] = useState(moment.duration(2, 'minutes'));

  useEffect(() => {
    const timer = setInterval(() => {
      const timeDiff = endTime.diff(moment());
      // 时间差小于等于0时，倒计时结束
      if (timeDiff <= 0) {
        setRemainingTime(moment.duration(0));
        clearInterval(timer);
        return;
      }
      setRemainingTime(moment.duration(timeDiff));
    }, 1000);

    // 组件卸载时清除定时器，防止内存泄漏
    return () => clearInterval(timer);
  }, [endTime]);

  // 数字补零，保证分、秒都是两位显示
  const formatNum = (num) => String(num).padStart(2, '0');

  return (
    <>
      <p>Deadline comes in</p>
      <p className="counter">
        <span>{formatNum(remainingTime.minutes())}:</span>
        <span>{formatNum(remainingTime.seconds())}</span>
      </p>
    </>
  );
};

页面加载后这段代码会自动启动倒计时，从02:00逐秒倒数到00:00后自动停止。

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