React展示组件中定时调用函数实现计时器的问题排查

我来帮你搞定这个计时问题，你现在的代码里有几个关键问题导致显示的是递增整数而非预期的时间文本，咱们一步步修正：

问题分析 #

1. setInterval的返回值不是你要的内容：setInterval()执行后会返回一个定时器ID（整数），你直接把这个ID渲染到页面上，所以看到的是20、21这种递增数字。
2. 错误传递了函数执行结果给setInterval：你写的是setInterval(tickingTimer(), 1000)，这里tickingTimer()会立即执行一次，返回的字符串会被当作定时器要执行的"函数"（但字符串不是函数，所以定时器后续不会正常工作），正确的做法是传递函数引用tickingTimer。
3. 没有用React状态管理时间：函数组件只有当状态或props变化时才会重新渲染，你直接返回固定字符串，组件不会自动更新显示新的时间。

修正后的完整代码 #

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

const MyComponent = () => {
  // 用useState存储要显示的时间文本，初始值设为你需要的起始时间
  const [timerText, setTimerText] = useState("00:02:48");

  // 定义每秒执行的计时函数，更新时间状态
  const tickingTimer = () => {
    // 这里以累加秒数为例：把当前时间转成moment时长，加1秒后重新格式化
    const currentDuration = moment.duration(timerText);
    const newDuration = currentDuration.add(1, 'seconds');
    // 用utc格式化确保补0，得到HH:mm:ss格式的文本
    const formattedTime = moment.utc(newDuration.asMilliseconds()).format('HH:mm:ss');
    setTimerText(formattedTime);
  };

  useEffect(() => {
    // 组件挂载时启动定时器，传递函数引用（不要加括号）
    const intervalId = setInterval(tickingTimer, 1000);
    
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(intervalId);
  }, []); // 空依赖数组：只在组件挂载和卸载时执行一次

  return(
    <div>
      {/* 渲染状态里的时间文本 */}
      <div>{timerText}</div>
    </div>
  );
}

export default MyComponent;

关键细节说明 #

• 状态管理：通过useState创建timerText状态，每次调用setTimerText都会触发组件重新渲染，展示最新的时间。
• 定时器生命周期：用useEffect处理定时器的创建和销毁，空依赖数组保证只在组件挂载时启动定时器，卸载时清除，防止无用的定时器继续运行。
• moment.js的时间处理：用moment.duration解析现有时间文本，累加秒数后，通过moment.utc(...).format('HH:mm:ss')生成标准的时分秒格式，确保不足两位的数字自动补0。

如果你的需求是倒计时（比如从某个时间往回减），只需要把add(1, 'seconds')改成subtract(1, 'seconds')即可，核心逻辑是一致的。

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