React使用useState时console.log打印状态为何出现多条控制台输出

问题根因 #

你遇到的所有多打印情况都不是React的bug，是开发环境的默认机制导致的：

• 页面加载时顶层console.log输出4条：
  1. React 18及以上版本默认开启严格模式（StrictMode），开发环境下会主动执行2次组件渲染流程，用来检测不规范的副作用写法，提前暴露隐患。
  2. 前端构建工具（Vite、CRA等）默认开启的Fast Refresh热更新能力，在首次页面加载时会额外触发2次组件重渲染，叠加严格模式的2次调用，刚好形成4条打印记录。
• 点击按钮时handleClick内打印2条：
  1. 严格模式在开发环境下会对状态更新相关的事件逻辑做重复调用检测，会额外触发一次执行。
  2. 你当前的写法本身存在闭包问题：调用setCurrentCount后立刻打印currentCount，拿到的永远是当前渲染闭包里缓存的旧值，不会是更新后的新值——React的状态更新是异步批处理的，不会同步修改当前作用域的变量。

注意：以上所有额外的重复调用仅在开发环境存在，执行生产环境构建后，所有检测逻辑都会被移除，组件渲染、事件执行次数都会和预期完全一致。

处理方案 #

• 不推荐为了消除开发环境的打印移除根组件的<React.StrictMode>包裹：严格模式能帮你提前发现很多隐蔽问题，比如未清理的定时器、重复发起的接口请求、不兼容未来React版本的写法等。
• 如果需要准确观测状态值，不要在setState调用后直接打印当前闭包的状态变量，两种正确写法：
  • 用useEffect监听状态变化，在状态更新完成、组件提交渲染后执行打印
  • 用函数式写法更新状态，在更新回调中拿到最新的前序状态值
• 要验证真实的用户侧执行逻辑，直接跑生产构建产物即可，不要以开发环境的控制台打印次数作为逻辑判断依据。

参考修正代码 #

import React, { useState, useEffect } from "react";

const Counter = () => {
  const [currentCount, setCurrentCount] = useState(0); 
  
  // 状态更新完成后打印，不会受开发环境重复渲染检测影响
  useEffect(() => {
    console.log("当前计数最新值：", currentCount);
  }, [currentCount]);

  function handleClick() {
    // 函数式更新避免闭包旧值问题
    setCurrentCount(prevCount => {
      console.log("更新前值：", prevCount, "更新后值：", prevCount + 1);
      return prevCount + 1;
    });
  }

  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <div>{currentCount}</div>
    </div>
  );
};
export default Counter;

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