我想对 usestate 或其他钩子做出反应。实施 60 秒倒计时。如何

【问题标题】：I want to react usestate or other hooks. Implement a 60 second countdown. How我想对 usestate 或其他钩子做出反应。实施 60 秒倒计时。如何
【发布时间】：2020-04-01 13:56:19
【问题描述】：

这是我实现计数器的尝试。

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

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

let intervalTimer = setInterval(countDown, 1000);

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

但它不起作用，我不知道为什么。

【问题讨论】：

你能澄清你的问题吗，你想做什么？已经有很多关于钩子的文章有大量信息可以帮助您入门。

标签： reactjs react-hooks

【解决方案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} />

【讨论】：

很好，谢谢??❤️