Usestate 挂钩未完全更新。在反应js中

Question

我看到了 DOM 的变化。但在穹顶一侧看不到变化。这是我的代码。

export const timer = () =>{
  const [hour, setHour] = useState(0)
  const [minute, setMinute] = useState(0)
  const [second, setSecond] = useState(0)

  const startConting = () => {
    const interval = setInterval(() => {
      if(second > 60){
        if(minute > 60){
          // Add hour, the programe doesn't support days
          if(hour <=24) {
            setHour((prev) => prev + 1)
            setMinute(0)
            setSecond(0)
          }else{
            // Add minute
            setMinute(prev => prev + 1)
            setSecond(0)
          }
        }
      }else{
        // Add second
        setSecond(prev => prev + 1)
      }
      console.log(second)
    }, 1000);
  }

  return(
    <>
      <div className="conter ">
        <span className="hours  time">
          {hour >= 10 ? hour : "0"+ hour }
        </span>
        <span className="time"> : </span> 
        <span className="munites time">
          {minute >= 10 ? minute : "0"+ minute }
        </span>
        <span className="time"> : </span>
        <span className="seconds time">
          {second >= 10 ? second : "0" + second }
        </span>
      </div>
    </>
  )
}

当我调用 start 函数时，我可以看到 DOM 内的第二个变化，但我尝试在 start 函数内控制第二个，它的值始终为 0。所以，我无法从秒传递到分钟等等。还有另一个代码用于清除间隔并且工作正常。

Answer 1

不要使用 useState，而应该使用 useEffect:

    useEffect(() => {
    const interval = setInterval(() => {
      if (second >= 59) {
        if (minute >= 59) {
          setHour((prev) => prev + 1);
          setMinute(0);
        } else {
          setMinute((prev) => prev + 1);
        }
        setSecond(0);
      } else {
        setSecond((prev) => prev + 1);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [second, minute, hour]);

这是处理功能组件中副作用的推荐方法，包括设置间隔。

附加说明：以防万一您没有导入它们：

import { useState, useEffect } from 'react';