React中点击按钮调用setInterval实现计数器启停的问题解决

你的代码出现计数器停在XXX-1-XXX后不再递增的问题，核心是闭包捕获的状态值过期：

• 点击Start触发onClickStart时，setInterval绑定的increment函数，捕获的是组件首次渲染时的counter初始值（0）。
• 之后每次increment执行，都是基于这个固定的0计算nextCounter = 0 + 1，所以setCounter只会把状态设为1，后续调用也不会再变化。

修复方案 #

把increment函数改成setCounter的函数式更新形式，让React每次都传入当前最新的状态值：

const increment = () => setCounter(oldCounter => oldCounter + 1);

完整修正代码 #

import React from 'react'
import './App.css'

function App() {
  const [counter, setCounter] = React.useState(0)
  const [intervalID, setIntervalID] = React.useState(null)

  const increment = () => setCounter(oldCounter => oldCounter + 1);

  const onClickStart = () => {
    setIntervalID(setInterval(increment, 100))
  }

  const onClickStop = () => {
    clearInterval(intervalID)
    setIntervalID(null)
  }

  return (
    <div className="App">
      <label>XXX-{counter}-XXX</label>
      <button onClick={onClickStart}>Start</button>
      <button onClick={onClickStop}>Stop</button>
    </div>
  )
}

export default App

修改后，每次increment执行时都会拿到最新的counter值进行累加，计数器就能正常从0、1、2…递增，点击Stop也能正确停止计时。

内容的提问来源于stack exchange，提问作者John Smith