在Reactjs中每秒运行一次(new Date())

Question

我有这个代码

import "./assets/styles/App.scss";
import moment from "moment";
import React from "react";
function App() {
let date = moment(new Date()).format("dddd, MMMM Do YYYY, h:mm:ss a")
return <div className="App">{date}</div>;
}
export default App;

我的问题是如何每秒更新日期以重新呈现日期？

Answer 1

最好的方法是在使用setInterval函数安装组件时向浏览器注册一个间隔。

Window和Worker接口上提供的setInterval((方法重复调用函数或执行代码段，每次调用之间有固定的时间延迟。

代码如下：

const getFormattedCurrentDate = () => moment(new Date()).format("dddd, MMMM Do YYYY, h:mm:ss a");
function App() {
const [date, setDate] = useState(getFormattedCurrentDate());
useEffect(() => {
const intervalId = setInterval(() => {
setDate(getFormattedCurrentDate());
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <div className="App">{date}</div>;
}

date变为状态，因为当您调用setDate时，React将重新发送您的组件(因此显示日期的变化(。

请记住，在卸载组件时，通过使用clearInterval从useEffect返回一个cleanup函数来清除间隔，否则会引发内存泄漏。

全局clearInterval((方法取消一个定时的、重复的操作，该操作以前是通过调用setInterval.((建立的。

Answer 2

当日期更新时，您需要使用React状态来触发重新渲染。更新渲染内部的变量本身不会触发重新渲染。

import "./assets/styles/App.scss";
import moment from "moment";
import React from "react";
function App() {
//Component state
const [date, setDate] = React.useState(handleGetCurrentDate());
//Component variables
const delay = 1000;
//Use effect loop to trigger re-render
React.useEffect(() => {
//Set timer with interval of 1 second
let dateTimer = setTimeout(() => setDate(handleGetCurrentDate()), delay);
// this will clear Timeout on component unmount
return () => {
clearTimeout(dateTimer);
};
}, []);

//Component functions
const handleGetCurrentDate = () => {
const dateFormat = "dddd, MMMM Do YYYY, h:mm:ss a";
return moment().format(dateFormat);
}
return <div className="App">{date}</div>;
}
export default App;