React中快速连续点击是否会引发状态更新Bug？

你的理解完全正确，这段代码确实存在理论上的Bug——和实际点击速度无关，哪怕通过代码模拟连续触发两次点击，也会出现最终count只加1的情况。

原因在于React的状态更新是异步批量处理的：当你直接用count这个当前渲染周期里的状态值计算新状态时，两次setCount(count + 1)调用都会捕获到同一个count值（初始的0），所以两次更新都会把状态设置为0+1=1，最终结果就只加了1。

要修复这个问题，应该使用函数式更新的写法：给setCount传入一个函数，这个函数会接收最新的状态值作为参数，返回新的状态。修改后的代码如下：

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>
        Click me
      </button>
    </div>
  );
}

这种写法下，每次调用setCount时都会基于最新的状态值计算下一个状态，哪怕连续触发多次更新，也能保证每次加1的操作都生效。

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