React组件中无依赖useEffect执行两次问题求助（React Router v6）

核心原因：React 18 Strict Mode #

这是React 18开发环境下的默认行为——Strict Mode会刻意让组件挂载→卸载→重新挂载，以此检测未正确清理的副作用。你的useEffect空依赖本应只执行一次，但在Strict Mode的开发环境中会触发两次，生产环境下这个现象会自动消失。

解决方案 #

1. 开发环境临时规避（不推荐长期使用）

如果只是不想在开发时看到两次执行，可以找到项目根组件（通常是index.js），去掉<StrictMode>的包裹：

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

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

⚠️ 注意：Strict Mode能帮你提前发现内存泄漏、重复订阅等潜在问题，建议开发时保留，生产环境无需手动移除，React会自动禁用该模式。

2. 确保组件未被重复渲染

检查你的路由配置或其他组件，确认<Profiles />是否被多次渲染。React Router v6中exact属性已默认生效，你的路由配置没问题，但要避免在其他地方（如Navbar、其他路由组件）重复引入<Profiles />。

3. 修复useEffect内部逻辑（额外提示）

你的代码中定义了fetchProfiles异步函数，但没有调用它，所以即使useEffect触发，也不会执行内部的请求逻辑。需要在useEffect里调用这个函数：

useEffect(() => {
  const fetchProfiles = async () => {
    console.log("profiles");
    // 你的异步请求逻辑
  };
  // 调用函数
  fetchProfiles();
}, []);

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