如何使用更新的 state 每 x 秒调用一次 function（反应）

Question

我在这方面遇到了很多麻烦，我尝试了各种方法。 我想在单击开始按钮后每秒调用一次 function，然后在单击停止按钮后暂停。 我不断得到我无法解释的奇怪行为。 我如何在没有课程的情况下做出反应？

我有一些事情：

      const simulation = () => {
    if (!running) {
      console.log('hit');
      return

    } else {
      // console.log(grid);
      console.log('hey');
      setTimeout(simulation, 1000)
    }
  }

和

    enter  setInterval(() => {
    let newGrid = [...grid]
    for (let i = 0; i < numRow; i++) {
      for (let k = 0; k < numCol; k++) {
        let n = 0;
      }
    }
    console.log(grid);
  }, 5000)

我已经尝试了很多，在某些情况下，它会更新 state 如果我已经添加到它，但在我重置 state 后没有更新它。 How can i call a function to run every one second with updated values of state * Note the function that i want to run will update the state

Answer 1

您可以执行以下操作：

• 跟踪当前计数器值以及组件 state 中的计数器开/关 state；
• 在打开/关闭计数器或增加计数器时调用useEffect()钩子；
• 在useEffect()主体中，您可以调用 function， count加一（如果ticking是真实的，则计时器开启）并延迟执行（使用setTimeout() ）；
• 一旦在 state 中更改count变量， useEffect()将在循环中再次调用；
• 为了在组件拆卸时清理计时器，您应该返回一个回调，从useEffect()清除计时器

 const { useState, useEffect } = React, { render } = ReactDOM, rootNode = document.getElementById('root') const App = () => { const [ticking, setTicking] = useState(true), [count, setCount] = useState(0) useEffect(() => { const timer = setTimeout(() => ticking && setCount(count+1), 1e3) return () => clearTimeout(timer) }, [count, ticking]) return ( <div> <div>{count}</div> <button onClick={() => setTicking(false)}>pause</button> <button onClick={() => setTicking(true)}>resume</button> </div> ) } render ( <App />, rootNode )

 <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>

Answer 2

迟到的回复，但对某些人来说可能很有趣。 查看 npm package cron。 在这种情况下，每 15 分钟一次 就像这样简单：

const [job] = useState(new cron.CronJob("0 */15 * * * *",async ()=>{
    await updateRiderCoords();
}));
useEffect(() => {
    job.start();
}, []);