ReferenceError：在初始化之前无法访问'UserContext' - React答案

【问题标题】：ReferenceError: Cannot access 'UserContext' before initialization - ReactReferenceError：在初始化之前无法访问'UserContext' - React
【发布时间】：2021-01-23 03:27:41
【问题描述】：

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

ReferenceError: Cannot access 'UserContext' before initialization

App.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;

LoginPage.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;

PageRoutes.js

import React from 'react';

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

Home.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  
}

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

【问题讨论】：

这不是您访问上下文值的方式，您需要使用消费者，请阅读文档
这是第二部分。请您关注第一个问题。为什么会出现初始化错误？没有它，我将无法使用提供者和消费者。 @DennisVash
我认为它与您没有显示的代码有关，请参阅如何制作可重现的示例，最好制作沙箱，How to create a Minimal, Reproducible Example
即使在遵循文档之后，我也遇到了同样的问题。 reactjs.org/docs/context.html#classcontexttype

标签： javascript reactjs components react-props react-context

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议创建一个组件来将路由直接包装为：

WithUser.jsx

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

export default (props) => {
    <UserContext.Provider value={null}>
        { props.children }
    </UserContext.Provider>
};

然后：

PageRoutes.jsx

import React from 'react';

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

如果您想为两条路线提供上下文，如果没有，只需包装您要使用的路线。

【讨论】：

【解决方案3】：

该错误似乎是由循环依赖引起的。我为解决该错误所做的是在提供程序文件之外创建上下文。尝试这样做：

UserContext.js

import React from 'react';
export const UserContext = React.createContext();

LoginPage.js

static contextType = UserContext;

或

MasterLoginPage.contextType = UserContext;

两者都不是。

您唯一需要做的就是导入 UserContext.js

【讨论】：