React中更新state导致setInterval函数异常问题求助

问题描述 #

实现秒表时，用setInterval每1000ms递增计时器变量原本正常，但在回调里加入setTime更新state后，出现打印结果混乱、计数不一致的问题，相关代码如下：

import { useState } from "react"

function Timer() {
  const [time, setTime] = useState({
    hr: 0,
    min: 0,
    sec: 0
  })
  const timeCalc = {
    seconds: 0,
    minutes: 0,
    hours: 0,
    timeCount() {
  let interval = setInterval(() => {
      this.seconds++
      console.log(this.seconds)
      // setTime({ ...time, sec: this.seconds })
      if (this.seconds === 60) {
        this.seconds = 0
        // setTime({ ...time, sec: 0 })
        this.minutes++
        // setTime({ ...time, min: this.minutes })
      }
      if (this.minutes === 60) {
        this.minutes = 0
        // setTime({ ...time, min: 0 })
        this.hours++
        // setTime({ ...time, hr: this.hours })
      }
    }, 1000)    
   }
  }
    timeCalc.timeCount()
  
  return (
    <div>
      <span>{`00${time.hr} : `.slice(-5)}</span>
      <span>{`00${time.min} : `.slice(-5)}</span>
      <span>{`00${time.sec}`.slice(-2)}</span>
    </div>
  )
}
export default Timer

异常原因 #

1. 闭包导致的state快照过期
   setInterval的回调函数会捕获组件初始渲染时的time state快照，每次调用setTime({ ...time, ... })都是基于这个旧快照更新，无法获取最新的state值，导致更新覆盖、计数错误。

2. 重复创建定时器
   每次调用setTime更新state都会触发组件重渲染，而timeCalc.timeCount()在组件顶层直接执行，重渲染时会再次创建新的setInterval，多个定时器同时运行，自然会让计数混乱。

3. 自定义对象状态不受React管控
   timeCalc里的seconds/minutes/hours是普通变量，组件重渲染时会被重新初始化，和React的state完全不同步，进一步加剧了计数的混乱。

修复方案 #

用useRef存储定时器ID和计数器（避免重渲染时重置），用useEffect管理定时器的创建与清理，同时使用函数式更新state确保基于最新状态修改：

import { useState, useEffect, useRef } from "react"

function Timer() {
  const [time, setTime] = useState({ hr: 0, min: 0, sec: 0 })
  // 用useRef存定时器ID和计数器，避免重渲染时重置
  const timerRef = useRef(null)
  const countsRef = useRef({ seconds: 0, minutes: 0, hours: 0 })

  useEffect(() => {
    // 创建定时器
    timerRef.current = setInterval(() => {
      const { seconds, minutes, hours } = countsRef.current
      let newSec = seconds + 1
      let newMin = minutes
      let newHr = hours

      if (newSec === 60) {
        newSec = 0
        newMin = minutes + 1
        if (newMin === 60) {
          newMin = 0
          newHr = hours + 1
        }
      }

      // 更新ref里的计数器
      countsRef.current = { seconds: newSec, minutes: newMin, hours: newHr }
      // 函数式更新state，确保拿到最新的state值
      setTime(prev => ({
        hr: newHr,
        min: newMin,
        sec: newSec
      }))
    }, 1000)

    // 组件卸载时清理定时器
    return () => clearInterval(timerRef.current)
  }, []) // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      <span>{`00${time.hr} : `.slice(-5)}</span>
      <span>{`00${time.min} : `.slice(-5)}</span>
      <span>{`00${time.sec}`.slice(-2)}</span>
    </div>
  )
}
export default Timer

关键修复点 #

• useRef存储定时器ID和计数器：ref的值在组件重渲染时不会重置，保持状态稳定。
• useEffect配合空依赖：确保定时器只在组件挂载时创建一次，避免重复创建。
• 函数式更新setTime：通过prev参数获取最新的state状态，避免闭包陷阱。

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