React中setTimeout回调无法获取更新后状态值的问题排查

你遇到的所有问题核心都是React的闭包捕获特性——定时器/延时器的回调函数会捕获它创建时所在那次渲染的状态值，后续组件重新渲染、状态更新后，旧回调里依然拿着之前的旧状态，自然看不到预期的最新值。

逐个分析你的代码问题 #

1. Ref存定时器的代码问题 #

你的drawBall函数在第一次渲染时被创建，捕获了当时的状态。每次调用drawBall时，虽然清除并重建了定时器，但新的定时器回调还是这个旧的drawBall，依然拿着第一次渲染的状态，所以更新状态时始终基于旧值，达不到预期效果。

2. setTimeout代码的问题 #

drawBall是初始渲染时生成的函数，捕获了初始的ballPos。每次setTimeout调用的都是这个旧函数，所以console.log(ballPos)永远是初始值。虽然你用了函数式更新setBallPos(prevVal => ...)能拿到最新的前值，但函数本身的闭包还是旧的，直接访问ballPos拿不到新状态。

3. useEffect代码的问题 #

你的useEffect依赖数组是空的[]，意味着它只会在组件初始渲染时执行一次，里面的ballPos是初始状态值。后续状态更新时，useEffect不会重新执行，所以interval的回调一直拿着初始的ballPos，打印的自然是旧值。

具体修复方案 #

方案一：用Ref同步最新状态（推荐用于持续定时器场景） #

创建一个Ref同步ballPos的最新值，每次状态更新时把新值存到Ref里，定时器回调直接访问Ref.current就能拿到最新状态：

const ballPosRef = useRef(ballPos);

// 每次ballPos更新时同步到Ref
useEffect(() => {
  ballPosRef.current = ballPos;
}, [ballPos]);

// 修复后的useEffect定时器
useEffect(() => {
  const interval = setInterval(() => {
    const canvas = gameBoard.current;
    const ctx = canvas.getContext('2d');
    // 从Ref获取最新状态
    let currX = ballPosRef.current.x;
    let currY = ballPosRef.current.y;
    currX += defaultDX;
    currY += defaultDY;
    console.log(currX, currY); // 现在能拿到最新值
    
    ctx.fillStyle = "#FF0000";
    ctx.beginPath();
    ctx.arc(currX, currY, 10, 0, Math.PI * 2, true);
    ctx.fill();

    setBallPos((prevVal) => {
      return {
        x: prevVal.x + defaultDX,
        y: prevVal.y + defaultDY
      }
    });
  }, 1000);

  return () => clearInterval(interval);
}, []); // 依赖保持空数组，靠Ref同步状态

方案二：给useEffect添加状态依赖（适合状态变化不频繁的场景） #

把ballPos加入useEffect的依赖数组，每次ballPos更新时，useEffect会重新执行，清除旧定时器并创建新的，新回调就能捕获最新状态：

useEffect(() => {
  const interval = setInterval(() => {
    const canvas = gameBoard.current;
    const ctx = canvas.getContext('2d');
    let currX = ballPos.x;
    let currY = ballPos.y;
    currX += defaultDX;
    currY += defaultDY;
    console.log(currX, currY); // 现在能拿到最新值
    
    ctx.fillStyle = "#FF0000";
    ctx.beginPath();
    ctx.arc(currX, currY, 10, 0, Math.PI * 2, true);
    ctx.fill();

    setBallPos((prevVal) => {
      return {
        x: prevVal.x + defaultDX,
        y: prevVal.y + defaultDY
      }
    });
  }, 1000);

  return () => clearInterval(interval);
}, [ballPos]); // 添加ballPos作为依赖

修复setTimeout的代码 #

用useCallback包裹drawBall，并把ballPos加入依赖，每次ballPos更新时，drawBall会重新创建，新的setTimeout调用的就是能捕获最新状态的函数：

const drawBall = useCallback(() => {
 console.log(ballPos); // 现在能拿到最新值
 setBallPos(prevVal => {
   console.log(prevVal);
   return {
       x: prevVal.x + 2,
       y: prevVal.y + 2
   }
 });

 setTimeout(drawBall, 1000);
}, [ballPos]); // 添加ballPos作为依赖

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