React Context：初始化前无法访问“AuthContext” 登录.jsHome.jsapp.js

如何解决React Context：初始化前无法访问“AuthContext” 登录.jsHome.jsapp.js

问题

我正在尝试使用 Context 从登录页面到主页传递 GitHub API 授权用户数据，以便可以显示用户信息（头像、姓名等）

但是，每当我尝试从 Home 中的类组件 Home.js 访问上下文时，我都会被告知 Cannot access 'AuthContext' before initialization。

我的代码

登录.js

import React,{ useState,useEffect,useContext } from "react";
import { Redirect } from "react-router-dom";
import Styled from "styled-components";
import { AuthContext } from "../App";

export default function Login() {
  const { state,dispatch } = useContext(AuthContext);
  const [data,setData] = useState({ errorMessage: "",isLoading: false });

  const { client_id,redirect_uri } = state;

  useEffect(() => {
    const url = window.location.href;
    const hasCode = url.includes("?code=");

    if (hasCode) {
      const newUrl = url.split("?code=");
      window.history.pushState({},null,newUrl[0]);
      setData({ ...data,isLoading: true });

      const requestData = {
        code: newUrl[1]
      };
      const proxy_url = state.proxy_url;
      fetch(proxy_url,{
        method: "POST",body: JSON.stringify(requestData)
      })
        .then(response => response.json())
        .then(data => {
          dispatch({
            type: "LOGIN",payload: { user: data,isLoggedIn: true }
          });
        })
        .catch(error => {
          setData({
            isLoading: false,errorMessage: "Sorry! Login failed: " + error
          });
        });
    }
  },[state,dispatch,data]);

  if (state.isLoggedIn) {
    return <Redirect to="/" />;
  }

  return (
    <Wrapper>
      <section className="container">
        <div className="card">
          <span className="errorMessage">{data.errorMessage}</span>
          <div className="login-container">
            {data.isLoading ? (
              <div className="loader-container">
                <div className="loader"></div>
              </div>
            ) : (
              <>
                {
                }
                <a
                  className="login-link"
                  href={`https://github.com/login/oauth/authorize?scope=user&client_id=${client_id}&redirect_uri=${redirect_uri}`}
                  onClick={() => {
                    setData({ ...data,errorMessage: "" });
                  }}
                >
                  <span className="btn">Login with GitHub</span>
                </a>
              </>
            )}
          </div>
        </div>
      </section>
    </Wrapper>
  );
}

const Wrapper = Styled.section`
  .container {
      background-color: #333;
  }
`;

Home.js

import React from "react";
import { Redirect } from "react-router-dom";
import Styled from "styled-components";
import { AuthContext } from "../App";

class Home extends React.Component {
  constructor() {
    super()
    this.state = {
      'items': []
    }
  }
  render() {
    const { state,dispatch } = this.context
    if (!state.isLoggedIn) {
      return <Redirect to="/login" />;
    }
    const { avatar_url,name,public_repos,followers,following } = state.user
    const handleLogout = () => {
      dispatch({
        type: "LOGOUT"
      });
    } 
    return (
      <Wrapper>
        <div className="container">
          <div>
            <div className="profileBox">
              <button className="btn" onClick={()=> handleLogout()}>Logout</button>
              <img  className="avatarImage" src={avatar_url} alt="Avatar"/>
              <span>{name}</span>
            </div>
          </div>
        </div>
      </Wrapper>
    )
  }
}

const Wrapper = Styled.section`
.content {
  background-color: lightgray;
}
`;
Home.contextType = AuthContext
export default Home

app.js

import React,{ createContext,useReducer } from 'react';
import { BrowserRouter as Router,Route,Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
import { initialState,reducer } from "./store/reducer";
import Styled from "styled-components";

export const AuthContext = createContext();

function App() {
  const [state,dispatch] = useReducer(reducer,initialState);

  return (
      <AuthContext.Provider
        value={{
          state,dispatch
        }}
      >
      <Router>
        <Switch>
          <Route path="/login" component={Login}/>
          <Route path="/" component={Home}/>
        </Switch>
      </Router>
      </AuthContext.Provider>
  );
}
export default App;

我尝试了什么

我试图将 Home.contextType = AuthContext 移动到 render() 但是因为渲染在第一次运行时被调用两次（我认为它与 this 相关）它是一个空对象,state 和 dispatch 都不存在。这会导致与 isLoggedIn 和其他与上下文相关的项目 "undefined" 相关的错误，因此我认为这不是合适的解决方案。 我也尝试在 statis contextType = AuthContext 声明之前和之后使用 constructor，但这些都不适合我。

我也尝试过使用 AuthContext.Consumer，但无济于事，因为当我们在 render() 中使用它时，我无法访问任何其他数据。但是我很高兴地承认 React 对我来说是新手，因此我可能误解了 Consumer 的工作原理。

非常感谢任何帮助。