为何空依赖useEffect中的函数在控制台触发两次调用？

架构老林

2026-8-6

问题原因及解决方案

为什么会打印两次"success"

这是**React严格模式（Strict Mode）**在开发环境下的默认行为。React Strict Mode会重复调用useEffect回调、生命周期函数等，用来帮你排查未清理的副作用、重复操作等潜在问题。
你的useEffect虽然设置了空依赖数组[]，但在开发环境的Strict Mode中会被执行两次，生产环境不会出现这个情况。

解决方法

方法1：关闭React Strict Mode

找到项目入口文件（一般是index.js或main.jsx），移除包裹组件的<React.StrictMode>标签即可。示例修改：

// 修改前
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 修改后
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);