Javascript Can'；无法访问React上下文

我最近尝试在我的React应用程序中实现上下文，但我无法在chlid组件上访问我的上下文

原则如下： jsindex.js提供了一个上下文，该上下文声明了一个与用户的登录状态相对应的值（false）

如果App.js在localstorage中检测到JWT存储，则上下文将更新为true，并呈现某个组件

代码如下：

AppContext.js

import React from 'react'

export const AppContext = React.createContext({
  isUserLogged: false
})

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/sakura/app.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
import { AppContext } from './context/AppContext'

ReactDOM.render((
  <AppContext.Provider>
      <App />
  </AppContext.Provider>
), document.getElementById('root'));

import React from 'react'
import Auth from './auth/Auth'
import Main from './main/Main'
import { AppContext } from '../context/AppContext'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        userToken: localStorage.getItem('spotlight-token'),
        isUserLogged: false
    }
}

UNSAFE_componentWillMount() {
    if (this.state.userToken) this.setState({isUserLogged: true})
}

static contextType = AppContext


render() {
    console.log(this.context)

    const isUserLogged = this.state.isUserLogged

    return isUserLogged ? <Main /> : <Auth />
}
}

export default App

index.js

import React from 'react'

export const AppContext = React.createContext({
  isUserLogged: false
})

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/sakura/app.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
import { AppContext } from './context/AppContext'

ReactDOM.render((
  <AppContext.Provider>
      <App />
  </AppContext.Provider>
), document.getElementById('root'));

import React from 'react'
import Auth from './auth/Auth'
import Main from './main/Main'
import { AppContext } from '../context/AppContext'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        userToken: localStorage.getItem('spotlight-token'),
        isUserLogged: false
    }
}

UNSAFE_componentWillMount() {
    if (this.state.userToken) this.setState({isUserLogged: true})
}

static contextType = AppContext


render() {
    console.log(this.context)

    const isUserLogged = this.state.isUserLogged

    return isUserLogged ? <Main /> : <Auth />
}
}

export default App

从“React”导入React
从“react dom”导入react dom
导入“./assets/sakura/app.css”
从“./components/App”导入应用程序
将*作为serviceWorker从“./serviceWorker”导入
从“./context/AppContext”导入{AppContext}
ReactDOM.render((
)，document.getElementById（'root'）；

App.js

import React from 'react'

export const AppContext = React.createContext({
  isUserLogged: false
})

import React from 'react'
import ReactDOM from 'react-dom'
import './assets/sakura/app.css'
import App from './components/App'
import * as serviceWorker from './serviceWorker'
import { AppContext } from './context/AppContext'

ReactDOM.render((
  <AppContext.Provider>
      <App />
  </AppContext.Provider>
), document.getElementById('root'));

import React from 'react'
import Auth from './auth/Auth'
import Main from './main/Main'
import { AppContext } from '../context/AppContext'

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        userToken: localStorage.getItem('spotlight-token'),
        isUserLogged: false
    }
}

UNSAFE_componentWillMount() {
    if (this.state.userToken) this.setState({isUserLogged: true})
}

static contextType = AppContext


render() {
    console.log(this.context)

    const isUserLogged = this.state.isUserLogged

    return isUserLogged ? <Main /> : <Auth />
}
}

export default App

从“React”导入React
从“./Auth/Auth”导入身份验证
从“/Main/Main”导入Main
从“../context/AppContext”导入{AppContext}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
userToken:localStorage.getItem（'spotlight-token'），
isUserLogged:false
}
}
不安全的_组件willmount（）{
if（this.state.userToken）this.setState（{isUserLogged:true}）
}
静态contextType=AppContext
render（）{
console.log（this.context）
const isUserLogged=this.state.isUserLogged
是否返回isUserLogged？：
}
}
导出默认应用程序

但问题是，控制台返回未定义的，我不明白为什么

感谢您的帮助，我知道这听起来有点愚蠢，但我是一个纯粹的宽度上下文初学者，非常想理解它。

阅读标题下的示例，从嵌套组件更新上下文：

app.js

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

ReactDOM.render(<App />, document.root);

从“/theme context”导入{ThemeSecontext，themes}；
从“./主题切换按钮”导入主题切换按钮；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggleTheme=（）=>{
this.setState（state=>({
主题：
state.theme==themes.dark
？主题、光
：themes.dark，
}));
};
//State还包含updater函数，因此
//被传递到上下文提供程序中
此.state={
主题：themes.light，
toggleTheme:this.toggleTheme，
};
}
render（）{
//整个状态将传递给提供程序
返回(
);
}
}
函数内容（）{
返回(
);
}
render（，document.root）；

theme-toggler-button.js

import {ThemeContext} from './theme-context';

function ThemeTogglerButton() {
  // The Theme Toggler Button receives not only the theme
  // but also a toggleTheme function from the context
  return (
    <ThemeContext.Consumer>
      {({theme, toggleTheme}) => (
        <button
          onClick={toggleTheme}
          style={{backgroundColor: theme.background}}>
          Toggle Theme
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default ThemeTogglerButton;

从“/主题上下文”导入{ThemeContext}；
函数ThemeTogglerButton（）{
//主题切换按钮不仅接收主题
//而且还有一个来自上下文的toggleTheme函数
返回(
{（{theme，toggleTheme}）=>(
切换主题
)}
);
}
导出默认的切换按钮；

您的提供程序没有值好的，但该值不是在AppContext.js？@RenaudMonell中传递的值，这是默认值，以防您忘记呈现提供程序。渲染提供程序时，应通过其值属性传入所需的值。目前你没有这个道具，所以你指定了未定义。非常感谢！这个概念有点模糊，现在我需要找到如何改变它的价值，我会很好@雷纳德·莫内尔把它当作道具传进来。