如何每 x 秒调用一个具有更新状态的函数（React）

IT技术 javascript reactjs
2021-05-17 16:44:25

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

我曾做过的事情：

      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)

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

2个回答

这是你一直在追求的东西吗？

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

回复晚了，但对某些人来说可能很有趣。查看 npm 包 cron。在这种情况下，每 15 分钟 就像：

const [job] = useState(new cron.CronJob("0 */15 * * * *",async ()=>{
    await updateRiderCoords();
}));
useEffect(() => {
    job.start();
}, []);
其它你可能感兴趣的问题
上一篇如何从 React Native 上的 uri 获取图像高度和宽度？ 下一篇如何在 yii2.0 中使用 react js