reactjs - 如何在 React 钩子(Hook)中自动停止 setInterval？

Question

我想构建一个计数到 60 然后自动停止的 Circular ProgressBar。

但它不能停止。

我想使用 React hooks 和 useEffect

我的代码在这里:

https://codesandbox.io/s/nostalgic-khorana-lijdyo?file=/src/App.js:0-686

但是这里的代码本质也是:

import React, { useState, useEffect } from "react";
import Circle from "./Circle";
export default function App() {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (counter < 60) {
        setCounter((t) => t + 1);
        console.log(counter);
      } else {
        console.log(`Why not run?`);
        return () => clearInterval(intervalId);
      }
      return () => clearInterval(intervalId);
    }, 100);
  }, []);

  return (
    <div>
      <div>
        <Circle
          size={250}
          strokeWidth={5}
          percentage={counter}
          color="#229880"
        />
      </div>
    </div>
  );
}

Answer 1

因为您不包括 counter在dependency的 useEffect , if (counter < 60) {...}语句将始终为 true (因为 counter 等于 0 在 react 中的每个重新渲染中)。获取 counter 先前值的最简单方法将在 setCounter 中获得它功能。

useEffect(() => {
  const intervalId = setInterval(() => {
    setCounter((t) => {
      if (t >= 60) clearInterval(intervalId);
      return (t < 60) ? t + 1 : t;
    });
  }, 100);
  return () => clearInterval(intervalId);
}, []);