如何使倒数计时器反应

用户名

我正在尝试做带反应的倒数计时器。从10到0基本上是倒数计时，当0时我将调用某个函数。

我理想地为我找到了一个示例：https : //codesandbox.io/s/0q453m77nw?from-embed，但这是一个类组件，我不会使用功能组件和挂钩来做到这一点，但我做不到。

我试过了：

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;

它很快就会从10倒数到0，而不是10秒。我在哪里错了？

布雷特·德伍德迪

似乎有多个useEffect挂钩导致倒计时每秒运行一次以上。

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

用于1秒后setTimeout更新seconds，或
做其他事情（在倒数结束时要调用的函数）

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。