ReferenceError：初始化前无法访问“UserContext” - React

Question

我正在尝试创建一个 UserContext 以便 React 应用程序中的所有类组件都可以访问。我收到以下错误。

ReferenceError: Cannot access 'UserContext' before initialization

应用程序.js

import React, { createContext } from 'react';
export const UserContext = createContext(null);
function App() {
  return (

    <div className="App">
      <UserContext.Provider value={null}>
        <PageRoutes />
      </UserContext.Provider>
    </div>

  );
}

export default App;

登录页面.js

import React, { Component } from 'react';
import { UserContext } from './App';

class MasterLoginPage extends Component {
    static contextType = UserContext;
    constructor(props) {
        super(props);
        this.state = {
            username: null,
            loggedIn: false
        }

// logic to work with username, password authentication

  render() {

    return (
        <div>
            // logic for rendering login page
          {
            this.state.loggedIn &&
            <UserContext.Provider value={this.state.username} />
          }
        </div>
  }
}

MasterLoginPage.contextType = UserContext;

export default MasterLoginPage;

页面路由.js

import React from 'react';

export default () => (
<BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginPage} />
      <Route exact path="/home" component={Home}/>
    </Switch>
</BrowserRouter>
);

主页.js

import React from 'react';

export default class Home extends React.Component {
  // I want to put this user in a state variable in this component  
}

1. 为什么我会收到引用错误，因为我已经在 App.js 中定义了它？
2. 如果我必须将 userContext 值存储在其他类组件（例如 Home.js）的状态变量中，那么我该怎么做？

Answer 1

在渲染块中调用 UserContext。让我知道这是否有效