在 setInterval 函数中使用时 console.log 运行无限次

Question

import React from "react";

function App() {
  let time = new Date().toLocaleTimeString();

  const [Time, setTime] = React.useState(time);

  function getTime() {
    time = new Date().toLocaleTimeString([], { hour12: false });
    //console.log(time);

    setTime(time);
  }
  setInterval(getTime, 2000);
  return (
    <div className="container">
      <h1>{Time}</h1>
      <button onClick={getTime}>Get Time</button>
    </div>
  );
}

export default App;

这是 React.js 的 App 组件。此代码正在创建一个运行时钟。当我注释掉 setInterval 函数时，console.log 工作正常，但是一旦我启用该功能，主屏幕上的所有内容都可以正常工作，但在控制台屏幕上，console.log(time) 正在运行无限次。请帮忙。感谢你。

Answer 1

问题是每次组件渲染它都会运行setInterval(getTime, 2000)，每次发生它都会更新状态，从而导致重新渲染。一种方法是将 setInterval 提取到一个单独的自定义钩子，该钩子不会在每次应用重新渲染时运行。您可能会发现这篇文章很有帮助https://overreacted.io/making-setinterval-declarative-with-react-hooks/。