反应组件的计时器/计数器 - 使用 setInterval() 增加后值保持为 0

Question

export default function Timer() {
   const [timer, setTimer] = useState(0)

   const checkTimer = () => {
     console.log(timer);
   }

   useEffect(() => {
      const timer = setInterval(() => {
        setTimer(prevCount => prevCount + 1);
      }, 1000);

      startProgram(); //This starts some other functions

      return () => {
        checkTimer();
        clearInterval(timer);
      }
   }, [])
}

上面是我的代码的简化版本和主要问题 - 我试图通过在 useEffect() 中设置一个间隔来增加timer 状态（仅一次）。但是，在checkTimer() 中，该值始终为 0，即使控制台语句每秒执行一次。我是 reactjs 新手，希望能得到一些帮助，因为这已经花费了我太多时间来修复。

Answer 1

checkTimer 向您显示timer 状态的初始值，因为陈旧关闭。这意味着在执行useEffect 时（即由于[] 作为依赖项而在组件挂载时一次），它注册了一个创建闭包的cleanup 函数围绕checkTimer 函数（以及它使用的所有内容，状态或道具值）。当这个闭包被创建时，timer state 的值是0。它会一直如此。

修复它的选项很少。

一个快速解决方案是使用useRef：

const timer = useRef(0);

const checkTimer = () => {
  console.log(timer.current);
};

useEffect(() => {
  const id = setInterval(() => {
    timer.current++;
  }, 1000);

  return () => {
    checkTimer();
    clearInterval(id);
  };
}, []);

查看this related post 以查看更多解决此问题的代码示例。

---

编辑：

而且，如果您还想在 UI 上显示 timer，我们需要使用 state，因为我们知道“ref”数据不会在 UI 上更新。所以，方案二是使用setTimer的“updater”形式来读取checkTimer函数中的最新状态数据：

const [timer, setTimer] = useState(0);

const checkTimer = () => {
  let prevTimer = 0;
  setTimer((prev) => {
    prevTimer = prev; // HERE
    return prev; // Returning same value won't change state data and won't causes a re-render
  });
  console.log(prevTimer);
};

useEffect(() => {
  const id = setInterval(() => {
    setTimer((prev) => prev + 1);
  }, 1000);

  return () => {
    checkTimer();
    clearInterval(id);
  };
}, []);