React useEffect多次调用问题求助：添加空依赖仍无效

常见原因及解决办法 #

1. 开启了React Strict Mode（仅开发环境） #

React 18的Strict Mode在开发环境下会故意让副作用（比如useEffect）执行两次，目的是帮你排查那些组件卸载时没清理的副作用问题。这是正常的开发校验行为，生产环境里不会出现这个情况。

验证方式：
查看你的入口文件（比如index.js/main.jsx），如果代码里有<React.StrictMode>包裹根组件，去掉之后开发环境里useEffect就只会执行一次。不过更建议保留Strict Mode，它能提前帮你发现潜在bug，生产环境会自动禁用这个重复执行逻辑。

2. 组件被反复挂载/卸载 #

如果LoginPage在应用里被多次挂载卸载（比如路由切换频繁触发，或者父组件状态变化导致它被反复销毁重建），也会让useEffect多次执行。

排查方法：
给组件加个卸载日志，观察控制台输出：

useEffect(() => {
  console.log("Log");
  return () => console.log("组件已卸载");
}, []);

如果控制台交替出现“Log”和“组件已卸载”，说明组件确实被反复挂载了，这时候要检查父组件的逻辑或者路由配置是否有问题。

3. 依赖数组的隐性问题 #

虽然你写了空依赖，但如果代码里有隐式依赖（比如引用了组件内的变量却没加到依赖数组里），ESLint的react-hooks/exhaustive-deps规则可能会自动修改依赖数组，导致useEffect触发。可以手动确认依赖数组确实是空的，或者检查ESLint的自动修复是否改动了代码。

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