React组件点击按钮UI更新但handleClick日志未打印的原因

我编写了如下React组件：

export default function Home() {
  const [isClicked, setIsClicked] = useState(false);

  console.log("Hello, World!");

  const handleClick = () => {
    setIsClicked(true);
    console.log("handleClick");
  };
 
  return (
    <main>
      <button onClick={handleClick}>
        a button
      </button>
      <div>
        {isClicked && <p>cool, clicked</p>}
      </div>
    </main>
  );
}

运行npm run dev后，控制台输出如下日志：

✓ Ready in 1252ms
○ Compiling / ...
✓ Compiled / in 905ms (465 modules)
Hello, World!

Hello, World!在组件渲染时打印符合预期，此时UI显示初始状态。点击按钮后，UI成功显示“cool, clicked”，说明isClicked已被设为true，即handleClick函数已执行，但控制台并未打印handleClick日志，请问这是为什么？

以下是几种最可能的情况，按排查优先级排序：

• 控制台过滤/显示设置问题
  这是最常见的原因：检查浏览器控制台的过滤选项，看看是不是只勾选了警告/错误级别，或者不小心开启了日志过滤规则（比如搜索了其他关键词没清空）。另外确认保留日志（Preserve log）选项是否开启，避免页面刷新（虽然这里状态更新不会触发刷新，但部分场景下可能有意外）。可以直接在控制台搜索handleClick关键词，确认日志是否被隐藏在历史记录里。

• 开发环境热更新缓存问题
  如果用了Vite、Next.js这类带热更新的工具，偶尔会出现函数引用未正确更新的情况。试试：

  1. 重启开发服务（按Ctrl+C终止后重新运行npm run dev）
  2. 清空浏览器缓存并硬刷新页面（Ctrl+Shift+R）

• console.log被全局重写
  检查项目中有没有其他代码重写了console.log方法（比如某些埋点工具、调试插件或者自定义的日志拦截代码），这种情况会导致正常的日志无法输出。可以在控制台直接执行console.log("test")，看看是否能正常输出，来验证这个问题。

• React Strict Mode的特殊行为（少见）
  在开发环境下，React Strict Mode会重复调用某些函数，但这不会导致日志消失。不过如果你的组件存在意外的卸载/重新挂载，可能需要检查组件的父组件是否有特殊逻辑，但从你的代码来看这种可能性极低。

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