React递归函数中setState无法更新计数器的问题及方案咨询

一、setState的异步执行逻辑 #

setState是批量异步更新，但它不会等待所有代码（包括setTimeout这类宏任务）执行完成才完成。React的异步更新逻辑是：在当前同步任务执行完毕后，批量处理状态更新；而setTimeout属于宏任务，会在同步任务和React的批量更新全部完成后才执行，所以setState的更新过程不会等待setTimeout里的代码。

二、你的代码问题根源 #

你的代码里，setCounter(prev => prev + 1)其实执行了，但setTimeout里判断的counter < 10以及console.log(counter)用到的counter，是组件第一次渲染时被闭包捕获的初始值（1）。因为每次递归调用setStateTest时，都是基于第一次渲染的闭包环境，永远拿不到更新后的counter值，所以会无限触发递归，看起来像是setState没执行。

三、解决方案 #

方案1：结合useState+useEffect（符合React范式的优雅方案） #

利用React的状态驱动渲染特性，通过useEffect监听counter的变化，每次状态更新后自动判断是否需要继续递增，避免闭包问题：

import { useState, useEffect } from 'react';

const TestComponent = () => {
  const [counter, setCounter] = useState(1);

  // 点击按钮触发第一次递增
  const startIncrement = () => {
    setCounter(prev => prev + 1);
  };

  // 监听counter变化，自动触发下一次递增（如果需要）
  useEffect(() => {
    if (counter < 10) {
      const timer = setTimeout(() => {
        setCounter(prev => prev + 1);
      }, 1000);
      // 组件卸载或counter更新时清除定时器，避免内存泄漏
      return () => clearTimeout(timer);
    }
  }, [counter]);

  return <button onClick={startIncrement}>Set State Test</button>;
};

这个方案里，每次counter更新都会触发组件重新渲染，useEffect依赖的counter是最新值，不会出现闭包捕获旧值的问题，完全符合React的状态管理逻辑。

方案2：使用useRef（适合无需UI更新的场景） #

如果你的场景不需要UI跟随counter变化，只是需要一个可变的计数器，可以用useRef——它的current属性是可变的，不会被闭包捕获旧值：

import { useRef } from 'react';

const TestComponent = () => {
  const counterRef = useRef(1);

  const setStateTest = () => {
    counterRef.current += 1;
    console.log(counterRef.current);
    if (counterRef.current < 10) {
      setTimeout(() => {
        setStateTest();
      }, 1000);
    }
  };

  // 如果需要UI显示counter，仍需结合useState：
  // const [counter, setCounter] = useState(1);
  // 每次更新ref时同步更新state：setCounter(counterRef.current)

  return <button onClick={setStateTest}>Set State Test</button>;
};

注意：useRef本身不会触发组件渲染，所以如果需要UI更新，还是要配合useState一起使用。

总结 #

• 若需要UI跟随状态变化，方案1是更优雅、符合React设计理念的选择；
• useRef不是useState的“最优替代”，而是针对不同场景的工具——当你需要一个不触发渲染的可变变量时，useRef才是合适的选择。

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