Reactjs 挂钩倒计时计时器不显示零

倒计时计时器不显示零值。 当秒或分钟接近零时，计时器删除显示值的范围。 如果计时器计时7分00秒，他显示7，但我需要分07秒00

所用的时间

代码

函数calculateTimeLeft（）{
const year=新日期（）.getFullYear（）；
常量差=+新日期（`${year}-10-1`）-+新日期（）；
让timeLeft={}；
如果（差异>0）{
时间限制={
天数：数学下限（差/（1000*60*60*24）），
小时数：数学楼层（（差/（1000*60*60））%24），
会议记录：数学地板（（差值/1000/60）%60），
秒数：数学下限（（差/1000）%60）
};
}
返回时间限制；
}
导出默认函数App（）{
const[timeLeft，setTimeLeft]=React.useState（calculateTimeLeft（））；
React.useffect（（）=>{
const id=setTimeout（（）=>{
setTimeLeft（calculateTimeLeft（））；
}, 1000);
return（）=>{
清除超时（id）；
};
});
常量timerComponents=Object.keys（timeLeft.map）（间隔=>{
如果（！timeLeft[间隔]）{
返回；
}
返回(
{timeLeft[interval]}{interval}{''}
);
});
返回(
{timerComponents.length？timerComponents:时间到了！}
);
}

此检查阻止为每个falsy值呈现

间隔，这意味着
0
也不会呈现：

if (!timeLeft[interval]) {
  return;
}

您应该检查该值是否
未定义
，以跳过渲染，尽管这在您的情况下是多余的。空对象将生成一个空的键数组，这意味着不会调用
forEach
回调

if (timeLeft[interval] === undefined) {
  return;
}

演示：


函数calculateTimeLeft（）{
const year=新日期（）.getFullYear（）；
常量差=+新日期（`${year}-10-1`）-+新日期（）；
让timeLeft={}；
如果（差异>0）{
时间限制={
天数：数学下限（差/（1000*60*60*24）），
小时数：数学楼层（（差/（1000*60*60））%24），
会议记录：数学地板（（差值/1000/60）%60），
秒数：数学下限（（差/1000）%60）
};
}
返回时间限制；
}
函数App（）{
const[timeLeft，setTimeLeft]=React.useState（calculateTimeLeft（））；
React.useffect（（）=>{
const id=setTimeout（（）=>{
setTimeLeft（calculateTimeLeft（））；
}, 1000);
return（）=>{
清除超时（id）；
};
});
常量timerComponents=Object.keys（timeLeft.map）（间隔=>{
if（timeLeft[间隔]==未定义）{
返回；
}
返回(
{timeLeft[interval]}{interval}{''}
);
});
返回时间组件；
}
ReactDOM.render(
,
根
);


if (timeLeft[interval] === undefined) {
  return;
}