React项目全局Context引入Login组件出现依赖循环问题怎么解决？

你对问题原因的判断是准确的，本次依赖循环的核心是双向导入形成的环形依赖：全局Context文件导入了Login组件，而Login组件又导入了该Context的自定义钩子，形成了闭环。

方案1：最低成本快速修复（无需调整架构） #

你已经给Login组件传递了toggleLogin属性，只需要把Login内部需要用到的Context方法也通过props传递即可，不需要在Login组件内引入全局Context，直接切断循环链路：

1. 修改globalContext.js中Login组件的调用逻辑，补充传入需要的方法：

<Login 
  toggleLogin={toggleLogin}
  setShowError={setShowError}
  setErrorMessage={setErrorMessage}
/>

2. 删掉Login.js里useGlobalContext的导入和调用代码，直接从props解构获取setShowError、setErrorMessage即可。

方案2：拆分Context（你提到的方案完全可行，更适合长期维护） #

按照单一职责原则拆分全局Context，从架构层面避免同类问题：

• 拆分出独立的AuthContext管理登录相关状态（showLogin、toggleLogin、登录态等）
• 拆分出独立的NotificationContext管理全局提示相关状态（showError、errorMessage、成功提示等）
  两个Context的Provider互相独立，不存在互相导入的问题，也避免了单个全局Context臃肿难维护的问题。

方案3：调整组件渲染位置 #

把Login、ErrorMessage组件从globalContext.js文件中移到Next项目的根组件（pages/_app.js或App Router的根layout）下渲染，globalContext.js只保留Context定义和Provider的基础逻辑，不需要导入任何业务组件，自然消除导入环。
调整后的根组件示例：

// pages/_app.js
import { GlobalProvider } from '../libs/context/globalContext'
import Login from '../../../components/Login'
import ErrorMessage from '../../../components/Modal/ErrorMessage'

export default function App({ Component, pageProps }) {
  return (
    <GlobalProvider>
      <Component {...pageProps} />
      {/* 全局组件统一移到根组件渲染 */}
      <Login />
      <ErrorMessage />
    </GlobalProvider>
  )
}

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