为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我在 React 中收到无效的 Hook 调用?

为什么我在 React 中收到无效的 Hook 调用?

肥皂起泡泡 2021-12-23 10:36:18
这是我的代码,它给出了Invalid Hook Call错误,我无法弄清楚我到底做错了什么。我如何在不调用函数中的钩子的情况下实现我在这段代码中所做的事情?const useTimer = ({ days  =0 , hours = 0 , minutes = 0 , seconds = 10 , millis = 0  } :{days?:number , hours? : number , minutes ?:number , seconds? : number , millis? : number} )=>{  const [time, setTime] = useState({ days , hours , minutes , seconds , millis });  const [started , setStarted] = useState(false) ;   const originalTime = { days , hours , minutes , seconds , millis }  const countDown = ()=>{    setTime(t=>{      let totalMillis  = 1000*(t.days * 24 * 3600 + t.hours * 3600 + t.minutes * 60 + t.seconds ) + t.millis ;       return {        days : totalMillis/(24*3600*1000) ,         hours : totalMillis/(3600*1000) ,         minutes : totalMillis/(60*1000) ,         seconds : totalMillis/1000 ,         millis : totalMillis%1000      }    })    }  const onTimeout = (callback : Function)=>{    callback() ;   }  const reset = ()=>{    setTime({...originalTime}) ;  }  const stop = ()=>{    setStarted(false) ;   }  const start= ()=>{    if(!started) setStarted(true) ;     setInterval(()=>{      if(started) countDown() ;     } , 1 ) ;   }  return {time , start , stop , reset , onTimeout} ; };  这是完整的错误消息:Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.错误发生在第二行本身: const [time, setTime] = useState({ days , hours , minutes , seconds , millis });我正在像这样使用这个钩子:const App = ()=> {    const { time } = useTimer({ days: 10 });    return (      <div>        <h1>{time}</h1>      </div>    )}为了制作这个库,我正在使用:create-react-library包。这是我的存储库的链接:https : //github.com/nateshmbhat/use-timer-react
查看完整描述

2 回答

?
PIPIONE

TA贡献1829条经验 获得超9个赞

您的代码中存在一些错误,因此我进行了一些修复。以下是工作版本。如果您需要任何解释,请告诉我。


const { useState, useRef } = React;

function App() {

  const { time, start, stop, reset, onTimeout } = useTimer({

    days: 10,

    interval: 100,

  });

  start();

  return (

    <div>

      <h1>{JSON.stringify(time, undefined, 2)}</h1>

    </div>

  );

}


const useTimer = ({

  days = 0,

  hours = 0,

  minutes = 0,

  seconds = 10,

  millis = 0,

  interval = 1000,

}) => {

  const [time, setTime] = useState({

    days,

    hours,

    minutes,

    seconds,

    millis,

  });

  const started = useRef(false);

  const originalTime = {

    days,

    hours,

    minutes,

    seconds,

    millis,

  };


  const countDown = () => {

    setTime(t => {

      let totalMillis =

        1000 *

          (t.days * 24 * 3600 +

            t.hours * 3600 +

            t.minutes * 60 +

            t.seconds) +

        t.millis -

        interval;

      return {

        days: Math.floor(totalMillis / 86400000),

        hours: Math.floor(

          (totalMillis % 86400000) / 3600000

        ),

        minutes: Math.floor(

          (totalMillis % 3600000) / 60000

        ),

        seconds: Math.floor((totalMillis % 60000) / 1000),

        millis: totalMillis % 1000,

      };

    });

  };


  const onTimeout = callback => {

    callback();

  };


  const reset = () => {

    setTime({ ...originalTime });

  };


  const stop = () => {

    start.current = false;

  };


  const start = () => {

    if (!started.current) {

      started.current = true;

      setInterval(() => {

        if (started.current) countDown();

      }, interval);

    }

  };


  return { time, start, stop, reset, onTimeout };

};


ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>


查看完整回答
反对 回复 2021-12-23
?
郎朗坤

TA贡献1921条经验 获得超9个赞

问题是:您在嵌套函数中调用了 react hook,这违反了react hooks规则

我可以看到您正在尝试使用 react 函数中其他函数中的 usestate 挂钩来设置状态。你可能想重新思考你的逻辑


查看完整回答
反对 回复 2021-12-23
  • 2 回答
  • 0 关注
  • 351 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号