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

Question

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

我有 triid 的东西：

      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)

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

Answer 1

您可以执行以下操作：

• 跟踪当前计数器值以及组件状态中的计数器开/关状态；
• 使用useEffect()钩子在打开/关闭计数器或递增计数器时调用；
• 在useEffect()体内，您可以调用该函数，增加count一（如果ticking为真，则计时器打开）并延迟执行（使用setTimeout()）；
• 一旦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>