我有一个功能组件,应该是一个运行中的时钟:
但由于某些原因,它只被渲染了两次,控制台输出如下:
import React,{useState,useEffect} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import { parseTime } from '../../Utils/utils'
const MainClock = (props) => {
const [timeString, setTimeString] = useState(parseTime(new Date(), true));
function tick(){
console.log("TICK:" + timeString)
setTimeString(parseTime(new Date(), true));
};
useEffect(()=>{console.log("rendered!");setTimeout(tick,500);},[timeString]);
return (
<div>
<h5 className="center-align mainclock">{timeString}</h5>
</div>
);
}
export default MainClock;
但由于某些原因,它只被渲染了两次,控制台输出如下:
rendered!
TICK:14:56:21
rendered!
TICK:14:56:22
为什么在第二次渲染后,useEffect没有被调用?
欢迎任何帮助!
编辑:如果有帮助的话,这是parseTime
:
const parseTime = (timeDate, withSeconds=false) =>{
let time = timeDate.getHours()<10 ? `0${timeDate.getHours()}`:`${timeDate.getHours()}`;
time+=":";
time+= timeDate.getMinutes()<10 ? `0${timeDate.getMinutes()}`:`${timeDate.getMinutes()}`;
if(withSeconds){
time+=":";
time+=timeDate.getSeconds()<10 ? `0${timeDate.getSeconds()}`:`${timeDate.getSeconds()}`;
}
return time;
}
parseTime
函数将一个给定的日期对象格式化为 hh:mm:ss 字符串。如果你说它对你来说正常工作,我真的不确定发生了什么。你的控制台输出是否持续打印新的 "TICK!..."? - Maor Magori