почему я получаю Invalid Hook колл в React?

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.

Ошибка происходит во 2-й строкесам: 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

Проблема в том, что вы вызываете реагирующий хук во вложенной функции, это противоречит правилу правила реактивных хуков .

Я вижу, что вы пытаетесь установить с помощьюпользовательское состояние перехватывает другие функции в функции реагирования. Возможно, вы захотите переосмыслить свою логику