React项目中Chrome控制台打印接口数据重复两次的原因咨询

你这段代码里的useEffect用了空依赖数组[]，按道理应该只在组件挂载时执行一次接口请求和打印，但开发环境下出现两次打印，最常见的原因是React Strict Mode（严格模式）。

核心原因： #

React的严格模式在开发环境中，会刻意重复调用部分操作来帮你提前排查潜在问题：

• 组件渲染函数
• useEffect、useLayoutEffect的回调函数
• 状态更新函数等

它会模拟「组件挂载-卸载-重新挂载」的过程，所以你的useEffect会被执行两次，接口请求发两次，打印自然也会出现两次。这是开发环境的正常调试机制，生产环境打包后Strict Mode会自动失效，不会有这个问题。

处理方案： #

1. 默认忽略（推荐）：这是React帮你提前发现副作用隐患的手段（比如未清理的订阅、非纯函数逻辑），生产环境不会触发，完全不影响线上功能。
2. 临时关闭Strict Mode：如果调试时觉得这个行为干扰，可以找到项目入口文件（比如index.js或main.jsx），去掉<React.StrictMode>的包裹：
   原代码可能是这样：

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

改成：

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

另外也可以简单排查下组件是否被意外重复挂载（比如父组件每次渲染都创建新的子组件实例、key值不稳定），但这种情况相对少见，优先考虑Strict Mode的影响。

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