React中多次点击按钮后pending状态更新异常问题咨询

我学习了React文档《Queueing a Series of State Updates》，在理解示例代码时遇到困惑：多次点击Buy按钮，仅首次等待3秒，之后pending直接降至0，并未每次减少pending都等待3秒，希望了解原因。示例代码如下：

import { useState } from 'react';

export default function RequestTracker() {
  const [pending, setPending] = useState(0);
  const [completed, setCompleted] = useState(0);

  
  async function handleClick() {
    setPending(p => p + 1);
    await delay(3000);
    setPending(p => p - 1);
    setCompleted(c => c + 1);
  }


  return (
    <>
      <h3>
        Pending: {pending}
      </h3>
      <h3>
        Completed: {completed}
      </h3>
      <button onClick={handleClick}>
        Buy     
      </button>
    </>
  );
}

function delay(ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms);
  });
}

核心原因：异步任务并行执行导致批量状态更新 #

每次点击Buy按钮都会触发独立的handleClick异步函数调用，这些调用的延迟逻辑是并行执行的，而非串行等待：

• 每次点击都会立刻执行setPending(p => p + 1)，所以短时间内多次点击会让pending快速累加（比如点击3次，pending直接变成3）。
• 所有await delay(3000)会同时开始计时（JavaScript异步非阻塞特性），3秒后所有异步函数的后续代码会同时触发。
• 多个setPending(p => p - 1)会被React批量处理，一次性将pending从累加值直接降到0，而非每次间隔3秒递减。

补充说明 #

这里使用函数式状态更新（setPending(p => p - 1)）是正确的，它确保了每次更新都基于最新状态值，避免了闭包捕获旧状态的问题。但本质问题在于异步任务的并行执行，而非状态更新方式。

如果要实现每次点击串行等待3秒（即每次减1都间隔3秒），需要通过状态控制按钮禁用，或者用队列管理异步任务，让任务按顺序执行。

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