React中useEffect循环内useState仅生效一次问题排查求助

问题原因 #

1. 状态更新的异步与闭包陷阱：React的状态更新是异步批量处理的，在同一个useEffect执行周期内，deck变量是闭包捕获的初始值（也就是触发useEffect时的状态）。两次setDeck调用都是基于这个旧值进行计算，最终第二次的更新会覆盖第一次，导致看起来只生效了一次。
2. drawCard函数依赖固定状态：原drawCard直接引用组件的deck状态，没有接收动态传入的当前数组，导致每次调用都使用同一个旧状态，无法基于上一次更新后的结果继续处理。

修复方案 #

1. 改造drawCard函数，让它接收当前数组作为参数

将drawCard改为纯函数，不依赖组件状态，而是接收当前要处理的数组，确保每次处理的都是最新值：

function drawCard(currentDeck: number[]) {
  // 按索引删除，避免重复元素时误删多个（原示例元素唯一，也可以用值过滤，但索引更通用）
  const randomIndex = Math.floor(Math.random() * currentDeck.length);
  return currentDeck.filter((_, index) => index !== randomIndex);
}

2. 一次性计算最终状态，单次调用setDeck（推荐）

在useEffect中先计算出两次删除后的最终数组，再一次性更新状态，避免多次异步更新的冲突：

useEffect(() => {
  if (count >= 1) {
    let updatedDeck = [...deck];
    for (let i = 0; i < 2; i++) {
      updatedDeck = drawCard(updatedDeck);
    }
    setDeck(updatedDeck);
  }
}, [count]);

3. 使用函数式更新，基于最新状态依次更新

如果需要保留多次setDeck调用，可以使用React的函数式更新语法，每次更新都会接收当前最新的状态作为参数：

useEffect(() => {
  if (count >= 1) {
    // 每次更新都基于上一次的最新状态
    setDeck(prevDeck => drawCard(prevDeck));
    setDeck(prevDeck => drawCard(prevDeck));
  }
}, [count]);

额外优化：按钮点击的函数式更新

原按钮的setCount(count+1)存在闭包陷阱，快速点击时可能导致计数错误，改为函数式更新更可靠：

<button onClick={() => setCount(prev => prev + 1)}>
  test
</button>

查看更新后的状态

原代码中的console.log(deck)会显示旧值（因为状态更新异步），如果要查看最新的deck状态，可以添加一个监听deck的useEffect：

useEffect(() => {
  console.log("当前deck状态:", deck);
}, [deck]);

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