為什么我的 setInterval 在 React 應用程序中不起作用

Question

我是新手，我正在嘗試創建一個簡單的時間展示網站以供練習
我嘗試使用setInterval()但它不起作用。

這是我的 App.js 文件

import React from "react";
import "./style.css";

function Clock(props) {
  return (
    <>
      <h2>{props.date.toLocaleTimeString()}</h2>
    </>
  );
}

function App() {
  return (
    <div>
      <Clock date={new Date()} />
    </div>
  );
}

setInterval(App, 1000);  {/* setInterval(Clock, 1000) */}

export default App;

和 Index.js 文件

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

單獨調用功能組件不會做任何事情，除非您將結果元素放入ReactDOM.render或另一個功能組件中。 你的setInterval(App, 1000); 什么都不做。

讓組件自己重新渲染。

function App() {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    setInterval(() => {
      setDate(new Date());
    }, 1000);
  }, []);
  return (
    <div>
      <Clock date={date} />
    </div>
  );
}

然后單用ReactDOM.render(<App />, document.getElementById("root")); 每當 state 發生變化時，都會導致時鍾更新。

如果您打算卸載組件，最好將間隔 ID 保存在變量中並從效果回調中返回清理 function 以清除間隔。

  useEffect(() => {
    const intervalId = setInterval(() => {
      setDate(new Date());
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);