reactjs - React 中的依赖周期问题

Question

ErrorMessage我在我的应用程序中创建了一个全局上下文，我想展示Login它们是否被触发打开。所以我把它们放在一个上下文中。问题是Login输出依赖周期问题。我认为这是因为如果他们输入了错误的电子邮件或密码ErrorMessage也会被发现。Login我将如何解决这个问题？我认为这是因为导入useGlobalContext. Login我正在考虑为auth?

import dynamic from 'next/dynamic'
import React, { createContext, useState, useContext } from 'react'

export const GlobalContext = createContext()

export const useGlobalContext = () => {
  return useContext(GlobalContext)
}

const ErrorMessage = dynamic(
  () => import('../../../components/Modal/ErrorMessage'),
  {
    ssr: false,
  }
)

const Login = dynamic(() => import('../../../components/Login'), {
  ssr: false,
})      --------> Dependency cycle via....

export const GlobalProvider = ({ children }) => {
  const [showLogin, setShowLogin] = useState(false)
  const [showError, setShowError] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')

  const toggleLogin = () => setShowLogin((prevState) => !prevState)

  return (
    <GlobalContext.Provider
      value={{
       showLogin,
       setShowLogin,
        toggleLogin,
        showError,
        setShowError,
        setErrorMessage,
        errorMessage,
      }}
    >
      {children}

      <Login toggleLogin={toggleLogin} />

      <ErrorMessage
        message={errorMessage}
        setShowModal={setShowError}
        showModal={showError}
      />
    </GlobalContext.Provider>
  )
}

登录.js

import { useGlobalContext } from '../../libs/context/globalContext'

    const LoginForm = ({ toggleLogin = () => {} }) => {
      const { setShowError, setErrorMessage } = useGlobalContext()
    
    
    }

   export default LoginForm

标签： reactjsreact-hooksnext.jsreact-contextuse-context