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

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

我有 triid 的东西：

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

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

and

    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)

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

您可以执行以下操作：

• 跟踪当前计数器值以及组件状态中的计数器开/关状态；
• employ useEffect()在打开/关闭计数器或递增计数器时调用挂钩；
• within useEffect()你可以调用该函数的主体，递增count减一（如果ticking是真的，因此计时器已打开）并延迟执行（使用setTimeout());
• once count变量在状态中改变，useEffect()在循环中再次被调用；
• 为了clean up https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup组件拆除时的计时器，您应该返回一个回调，清除计时器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>