如何以更新的状态每 x 秒调用一次函数（React）答案

【问题标题】：How to call a function every x seconds with updated state (React)如何以更新的状态每 x 秒调用一次函数（React）
【发布时间】：2020-07-28 21:50:51
【问题描述】：

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

我的一些事情：

      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)

我已经尝试了很多，在某些情况下，如果我添加了状态，它会更新状态，但在我重置状态后不会更新它。我如何调用一个函数以更新状态值每秒运行一次 * 请注意我要运行的函数将更新状态

【问题讨论】：

您需要准确的计时吗？
我猜不是——只是时间一致
为什么需要更新状态？你听说过钩子吗？和 useEffect 挂钩？
setInterval 和 setTimeout 对于时间跟踪不可靠
我需要更新状态，因为我正在重新创建生命游戏 - 每 1 秒我想运行一个会改变状态的函数

标签： javascript reactjs

【解决方案1】：

是不是你一直在追求的东西？

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)
   })
   
   return (
    <div>
      <div>{count}</div>
      <button onClick={() => setTicking(false)}>pause</button>
      <button onClick={() => setTicking(true)}>resume</button>
    </div>
   )
}  

render (
  <App />,
  rootNode
)

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

【讨论】：

有意思，你为什么每次都清除间隔？
@ST : clearInterval() 实际上是在组件卸载时调用 only once
为什么会返回清除间隔？实际退回的是什么以及去哪里？
我用你的答案做了我自己的： const [timer, setTimer] = useState(0) const incTimer = () => { setTimer(timer + 1) } useEffect(() => { console.log(running); if (!running) { return; } else { const interval = setInterval(incTimer, 1000) return () => { clearInterval(interval) } } }, [timer, running])
useEffect 中返回的函数在组件卸载时用作回调，以便在组件生命周期结束时清除间隔。

【解决方案2】：

回复较晚，但对某些人来说可能很有趣。查看 npm 包 cron。在这种情况下，每 15 分钟一次简单如下：

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

【讨论】：