嵌套setTimeout中React状态更新丢失元素问题求助

问题根源 #

你遇到的是React闭包陷阱：由于useEffect的依赖数组为空，内部的blocks变量会一直捕获组件初始渲染时的数组状态（假设初始blocks为空数组）。第二次调用setBlocks时，[...blocks, commandBlock]展开的依然是初始的空数组，而非已经添加了serverBlock的最新数组，导致第一个元素被覆盖。

核心解决办法：使用函数式更新 #

React的setState支持传入函数，该函数会接收当前最新的state作为参数，确保每次更新都基于最新状态：

useEffect(() => {
  let timeout1, timeout2;
  
  timeout1 = setTimeout(() => {
    // 基于最新状态添加第一个元素
    setBlocks(prevBlocks => [...prevBlocks, serverBlock]);
    timeout2 = setTimeout(() => {
      // 同样基于最新状态添加第二个元素
      setBlocks(prevBlocks => [...prevBlocks, commandBlock]);
    }, 2000);
  }, 1200);

  // 组件卸载时清理定时器，避免内存泄漏
  return () => {
    clearTimeout(timeout1);
    clearTimeout(timeout2);
  };
}, []);

更直观的实现方式（避免嵌套定时器） #

可以把两个定时器分开，逻辑更清晰，同时统一管理清理逻辑：

useEffect(() => {
  // 1200ms后添加第一个元素
  const timer1 = setTimeout(() => {
    setBlocks(prev => [...prev, serverBlock]);
  }, 1200);

  // 从渲染开始算3200ms后添加第二个元素（和嵌套定时器效果一致）
  const timer2 = setTimeout(() => {
    setBlocks(prev => [...prev, commandBlock]);
  }, 3200);

  // 清理定时器
  return () => {
    clearTimeout(timer1);
    clearTimeout(timer2);
  };
}, []);

额外注意事项 #

如果serverBlock或commandBlock是动态生成的（比如依赖其他state/props），需要把它们加入useEffect的依赖数组，避免捕获旧值：

useEffect(() => {
  // ... 定时器逻辑
}, [serverBlock, commandBlock]);

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