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

Question

这是我的代码，它给出了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 Hooks

3. You might have more than one copy of React in the same app

See 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

Answer 1

您的代码中存在一些错误，因此我进行了一些修复。以下是工作版本。如果您需要任何解释，请告诉我。const { useState, useRef } = React;function App() {&nbsp; const { time, start, stop, reset, onTimeout } = useTimer({&nbsp; &nbsp; days: 10,&nbsp; &nbsp; interval: 100,&nbsp; });&nbsp; start();&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <h1>{JSON.stringify(time, undefined, 2)}</h1>&nbsp; &nbsp; </div>&nbsp; );}const useTimer = ({&nbsp; days = 0,&nbsp; hours = 0,&nbsp; minutes = 0,&nbsp; seconds = 10,&nbsp; millis = 0,&nbsp; interval = 1000,}) => {&nbsp; const [time, setTime] = useState({&nbsp; &nbsp; days,&nbsp; &nbsp; hours,&nbsp; &nbsp; minutes,&nbsp; &nbsp; seconds,&nbsp; &nbsp; millis,&nbsp; });&nbsp; const started = useRef(false);&nbsp; const originalTime = {&nbsp; &nbsp; days,&nbsp; &nbsp; hours,&nbsp; &nbsp; minutes,&nbsp; &nbsp; seconds,&nbsp; &nbsp; millis,&nbsp; };&nbsp; const countDown = () => {&nbsp; &nbsp; setTime(t => {&nbsp; &nbsp; &nbsp; let totalMillis =&nbsp; &nbsp; &nbsp; &nbsp; 1000 *&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (t.days * 24 * 3600 +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t.hours * 3600 +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t.minutes * 60 +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; t.seconds) +&nbsp; &nbsp; &nbsp; &nbsp; t.millis -&nbsp; &nbsp; &nbsp; &nbsp; interval;&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; days: Math.floor(totalMillis / 86400000),&nbsp; &nbsp; &nbsp; &nbsp; hours: Math.floor(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (totalMillis % 86400000) / 3600000&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; minutes: Math.floor(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (totalMillis % 3600000) / 60000&nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; seconds: Math.floor((totalMillis % 60000) / 1000),&nbsp; &nbsp; &nbsp; &nbsp; millis: totalMillis % 1000,&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });&nbsp; };&nbsp; const onTimeout = callback => {&nbsp; &nbsp; callback();&nbsp; };&nbsp; const reset = () => {&nbsp; &nbsp; setTime({ ...originalTime });&nbsp; };&nbsp; const stop = () => {&nbsp; &nbsp; start.current = false;&nbsp; };&nbsp; const start = () => {&nbsp; &nbsp; if (!started.current) {&nbsp; &nbsp; &nbsp; started.current = true;&nbsp; &nbsp; &nbsp; setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; if (started.current) countDown();&nbsp; &nbsp; &nbsp; }, interval);&nbsp; &nbsp; }&nbsp; };&nbsp; 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>

Answer 2

问题是：您在嵌套函数中调用了 react hook，这违反了react hooks的规则。我可以看到您正在尝试使用 react 函数中其他函数中的 usestate 挂钩来设置状态。你可能想重新思考你的逻辑