React中useState无法更新问题求助（定时器场景）

问题原因 #

你的代码存在两个核心问题：

1. 重复执行状态更新且无返回值：在setInterval回调里已经调用了setTimeOut(formatTime(createdAt))，但formatTime内部又再次调用setTimeOut(res)，同时formatTime没有返回值，导致第一次setTimeOut接收的是undefined，直接把状态覆盖为空。
2. 状态更新冲突：两次setState调用互相干扰，最终导致状态无法正确保留计算后的结果。

解决方法 #

1. 修改formatTime为纯函数，返回计算结果 #

让formatTime只负责时间计算，不再内部调用setState，把返回值交给setInterval里的setTimeOut来更新状态：

const Timer = ({ item }) => {
  const [timeOut, setTimeOut] = useState('')
  console.log(timeOut)

  useEffect(() => {
    if (status !== 'unPaid') return;

    const timer = window.setInterval(() => {
      // 直接用formatTime的返回值更新状态
      setTimeOut(formatTime(createdAt));
    }, 1000);

    return () => window.clearInterval(timer);
  }, [createdAt, status, formatTime]); // 加入formatTime到依赖数组

  // 改为纯函数，返回计算后的时间字符串
  const formatTime = (time) => {
    console.log(time)
    const timer = new Date(time).getTime() + 250000
    const countDown = new Date().getTime()
    const distance = timer - countDown

    const min = Math.floor((distance % (1000*60*60)) / (1000*60))
    const sec = Math.floor((distance % (1000*60)) / 1000)
    // 补零优化（可选，让秒数显示两位）
    const formattedSec = sec.toString().padStart(2, '0')
    return `${Math.abs(min)}:${formattedSec}`
  }

  // 其他组件逻辑...
}

2. 优化依赖项（可选） #

为避免组件重渲染时formatTime被重新创建导致useEffect频繁触发，用useCallback包裹formatTime：

import { useCallback } from 'react'

// ...

const formatTime = useCallback((time) => {
  const timer = new Date(time).getTime() + 250000
  const countDown = new Date().getTime()
  const distance = timer - countDown

  const min = Math.floor((distance % (1000*60*60)) / (1000*60))
  const sec = Math.floor((distance % (1000*60)) / 1000)
  const formattedSec = sec.toString().padStart(2, '0')
  return `${Math.abs(min)}:${formattedSec}`
}, []) // 无依赖，内部未用到组件状态/ props

useEffect(() => {
  if (status !== 'unPaid') return;

  const timer = window.setInterval(() => {
    setTimeOut(formatTime(createdAt));
  }, 1000);

  return () => window.clearInterval(timer);
}, [createdAt, status, formatTime]);

3. 处理倒计时结束的情况（可选） #

当distance <= 0时，清除定时器并设置状态为"已结束"：

const formatTime = useCallback((time) => {
  const timer = new Date(time).getTime() + 250000
  const countDown = new Date().getTime()
  const distance = timer - countDown

  if (distance <= 0) {
    return "已结束"
  }

  const min = Math.floor((distance % (1000*60*60)) / (1000*60))
  const sec = Math.floor((distance % (1000*60)) / 1000)
  const formattedSec = sec.toString().padStart(2, '0')
  return `${Math.abs(min)}:${formattedSec}`
}, [])

// 在useEffect里检查状态，结束时清除定时器
useEffect(() => {
  if (status !== 'unPaid') return;

  const timer = window.setInterval(() => {
    const result = formatTime(createdAt)
    setTimeOut(result)
    if (result === "已结束") {
      clearInterval(timer)
    }
  }, 1000);

  return () => window.clearInterval(timer);
}, [createdAt, status, formatTime]);

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