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() {
  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>

Answer 2

问题是：您在嵌套函数中调用了一个React钩子，这是针对rule of react hooks的。

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

为什么我在React中收到无效的Hook呼叫？

2 个答案: