美文网首页
Error: Rendered fewer hooks than

Error: Rendered fewer hooks than

作者: Shiki_思清 | 来源:发表于2020-10-19 20:49 被阅读0次
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将无法将钩子调用与其值匹配。

相关文章

网友评论

      本文标题:Error: Rendered fewer hooks than

      本文链接:https://www.haomeiwen.com/subject/rmulmktx.html