Error: Rendered fewer hooks than expected. This may be caused by an accidental early return state...

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将无法将钩子调用与其值匹配。