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

Question

请参考我下面的代码

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

setInterval(DisplayTime,1000);

export default DisplayTime;

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

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>;
}

在 this Sandbox 中试用。

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

How can I update my function to show the clock that ticks every second

javascript

setinterval

reactjs