时间戳

首页 > 解决方案 > 为什么我的 setInterval 在 React 应用程序中不起作用

javascript - 为什么我的 setInterval 在 React 应用程序中不起作用

问题描述

我是新手，我正在尝试创建一个简单的时间展示网站，用于
我尝试使用的练习，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"));

标签： javascriptreactjs

解决方案

单独调用功能组件不会做任何事情，除非您将结果元素放入一个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"));就会导致时钟更新。

如果您打算卸载组件，最好将间隔 ID 保存在变量中并从效果回调中返回清理函数以清除间隔。

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

推荐阅读