如何使反应倒数计时器 [英] How make react countdown timer

问题描述

我正在尝试用反应做倒数计时器.基本上是从 10 到 0 倒计时，当 0 时我会调用一些函数.

我找到了一些非常适合我的例子:https://codesandbox.io/s/0q453m77nw?从嵌入但它是一个类组件，我不想用功能组件和钩子来做到这一点，但我不能.

我试过:

function App() {const [seconds, setSeconds] = useState(10);useEffect(() => {setSeconds(setInterval(seconds, 1000));}, []);useEffect(() => {打钩();});功能滴答(){如果(秒 > 0){setSeconds(秒 - 1)} 别的 {清除间隔(秒)；}}返回 (<div className="应用程序">

);}导出默认应用程序；

它从 10 倒数到 0 非常快，而不是在 10 秒内.我错在哪里?

解决方案

看来多个 useEffect 钩子导致倒计时每秒运行一次以上.

这是一个简化的解决方案，我们检查 useEffect 钩子中的 seconds 和:

• 使用setTimeout在1秒后更新seconds，或者
• 做其他事情(你想在倒计时结束时调用的函数)

这种方法有一些缺点，见下文.

function App() {const [seconds, setSeconds] = React.useState(10);React.useEffect(() => {如果(秒 > 0){setTimeout(() => setSeconds(seconds - 1), 1000);} 别的 {setSeconds('BOOOOM!');}});返回 (<div className="应用程序"><div>{秒}

);}ReactDOM.render(, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

缺点

使用 setInterval 的缺点是它可能会被停止 - 例如，组件被卸载，您导航到不同的选项卡，或关闭您的计算机.如果计时器需要更高的稳健性，更好的选择是在状态中存储 endTime(如全局存储或上下文)，并让您的组件根据 endTime计算倒计时.

i'm trying to do countdown timer with react. It will be basically countdown from 10 to 0 and when 0 i will call some function.

i found ideally for me some example: https://codesandbox.io/s/0q453m77nw?from-embed but it's a class component i wan't to do that with functional component and hooks but i can't.

i tried:

function App() {
  const [seconds, setSeconds] = useState(10);
  useEffect(() => {
    setSeconds(setInterval(seconds, 1000));
  }, []);

  useEffect(() => {
    tick();
  });

  function tick() {
    if (seconds > 0) {
      setSeconds(seconds - 1)
    } else {
      clearInterval(seconds);
    }
  }

  return (

    <div className="App">
      <div
        {seconds}
      </div>
    </div>
  );
}

export default App;

it's count down from 10 to 0 very quickly not in 10 seconds. where i mistake ?

解决方案

It appears the multiple useEffect hooks are causing the countdown to run more than once per second.

Here's a simplified solution, where we check the seconds in the useEffect hook and either:

• Use setTimeout to update seconds after 1 second, or
• Do something else (the function you want to call at the end of the countdown)

There are some downsides to this method, see below.

function App() {
  const [seconds, setSeconds] = React.useState(10);

  React.useEffect(() => {
    if (seconds > 0) {
      setTimeout(() => setSeconds(seconds - 1), 1000);
    } else {
      setSeconds('BOOOOM!');
    }
  });

  return (
    <div className="App">
      <div>
        {seconds}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Downsides

Using setInterval has the downside that it could be stopped - for example, the component is unmounted, you navigate to a different tab, or close your computer. If the timer requires more robustness, the better alternative would be to store an endTime in the state (like a global store or context) and have your component check the current time against the endTime to calculate the countdown.

这篇关于如何使反应倒数计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！