javascript - 如何更新我的功能以显示每秒滴答的时钟

Question

请参考我下面的代码

var DisplayTime = () => {
  return <h1 style={{ color: "white" }}> {new Date().toLocaleTimeString()}</h1>;
};

setInterval(DisplayTime,1000);

export default DisplayTime;

它显示调用函数的时间。我希望它每秒更新一次。

标签： javascriptreactjssetinterval

Answer 1

创建一个状态变量来存储，time在里面useEffect你可以创建一个interval每秒更新时间。别忘了clearInterval在里面useEffect cleanup。

import { useEffect, useState } from "react";

export default function App() {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return <h1>{time}</h1>;
}

在这个沙盒中试一试。