Я хочу отреагировать на использование состояния или других крючков. Реализуйте 60-секундный обратный отсчет. Как

Question

Это моя попытка реализовать счетчик.

const [stateTime, setTime] = useState(time);

let countDown = () => { 
  setTime(stateTime - 1);
};

let intervalTimer = setInterval(countDown, 1000);

setTimeout(() => {
  clearInterval(intervalTimer);
}, 5000);

Но он не работает, и я не знаю почему.

Answer 1

Вот что вы можете сделать

const CountDown = ({ seconds }) => {
  const [timeLeft, setTimeLeft] = useState(seconds);

  useEffect(() => {
    // exit early when we reach 0
    if (!timeLeft) return;

    // save intervalId to clear the interval when the
    // component re-renders
    const intervalId = setInterval(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);

    // clear interval on re-render to avoid memory leaks
    return () => clearInterval(intervalId);
    // add timeLeft as a dependency to re-rerun the effect
    // when we update it
  }, [timeLeft]);

  return (
    <div>
      <h1>{timeLeft}</h1>
    </div>
  );
};

В вашем родительском компоненте

<CountDown seconds={60} />