image.png
let isArrived = durationTime < 0;
********************看这里************************
if (isArrived) {
return <div>0 天 0 时 0 分 0 秒</div>
}
********************看这里***********************
useEffect(() => {
timerID.current = setInterval(() => {
let arriveTime = `${durationTime.days()} 天 ${durationTime.hours()} 时 ${durationTime.minutes()} 分 ${durationTime.seconds()} 秒`;
if (!isArrived) {
durationTime = moment.duration(end.diff(moment()));
setTime(() => arriveTime); // make pretty
}
}, 1000);
}, []);
useEffect(() => {
if (isArrived) {
clearInterval(timerID.current);
}
});
原因
在执行组件时，如果isArrived时，直接返回了，导致下面的两个useEffect没能执行
解决
去掉任何会导致后续 useEffect 和useState不执行的return语句，即删除 if 语句 ，业务逻辑在原有基础上另行判断
机制
调用钩子的顺序很重要，如果我们编写导致不调用钩子的代码，React将无法将钩子调用与其值匹配。
