为什么我的 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);
  }, []);