javascript - 在react中使用setInterval的增量值被破坏

Question

function App() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    setInterval(() => {
      setTick(tick + 1);
    }, 1000);
  }, [tick]);

  return (
    <div className="App">
      <h1>{tick}</h1>
    </div>
  );
}

结果每秒增加超过 1，一开始还有效，后来就开始困惑了。查看演示 https://codesandbox.io/s/eloquent-kepler-vvzr7

Answer 1

因为每次更新tick时，效果都会触发并启动另一个计时器...该效果不应依赖于tick:

 useEffect(() => {
    let id = setInterval(() => {
      setTick(tick => tick + 1); // No dependency anymore
    }, 1000);

    // This has nothing todo with your problem, but I encourage you to correctly clean up effects:
    return () => clearInterval(id);
 }, []); // <<