Javascript 盖茨比上下文API不'；我不能表现出它的价值

试图从上下文API呈现状态，但在控制台中它显示为

undefined

，不呈现任何内容

这里是上下文文件

import React, { useReducer, createContext } from "react"

export const GlobalStateContext = createContext()
export const GlobalDispatchContext = createContext()

const initialState = {
  isLoggedIn: "logged out",
}

function reducer(state, action) {
  switch (action.type) {
    case "TOGGLE_LOGIN":
      {
        return {
          ...state,
          isLoggedIn: state.isLoggedIn === false ? true : false,
        }
      }
      break

    default:
      throw new Error("bad action")
  }
}

const GlobalContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <GlobalStateContext.Provider value={state}>
      {children}
    </GlobalStateContext.Provider>
  )
}

export default GlobalContextProvider

import React，{useReducer，createContext}来自“React”
导出常量GlobalStateContext=createContext（）
导出常量GlobalDispatchContext=createContext（）
常量初始状态={
isLoggedIn：“注销”，
}
功能减速机（状态、动作）{
开关（动作类型）{
案例“切换_登录”：
{
返回{
……国家，
isLoggedIn:state.isLoggedIn==false？true:false，
}
}
打破
违约：
抛出新错误（“错误操作”）
}
}
const GlobalContextProvider=（{children}）=>{
const[state，dispatch]=useReducer（reducer，initialState）
返回(
{儿童}
)
}
导出默认GlobalContextProvider

这里是应该呈现价值的地方

import React, { useContext } from "react"
import {
  GlobalStateContext,
  GlobalDispatchContext,
} from "../context/GlobalContextProvider"

const Login = () => {
  const state = useContext(GlobalStateContext)
  console.log(state)
  return (
    <>
      <GlobalStateContext.Consumer>
        {value => <p>{value}</p>}
      </GlobalStateContext.Consumer>
    </>
  )
}

export default Login

import React，{useContext}来自“React”
进口{
全球国家环境，
GlobalDispatchContext，
}来自“./context/GlobalContextProvider”
常量登录=（）=>{
const state=useContext（GlobalStateContext）
console.log（状态）
返回(
{value=>{value}
}
)
}
导出默认登录名

我以前也尝试过用类组件做同样的事情，但没有解决问题。当我控制台日志上下文时，它看起来像是具有未定义值的对象

有什么想法吗？

一般来说，上下文API 从评论中可以看出，潜在的问题似乎是您没有将

呈现为

的孩子。当您将上下文使用者用作钩子或函数时，组件树中的某个地方需要有一个匹配的提供者作为其父级

例如，这些方法不起作用：

<div>
    <h1>Please log in!</h1>
    <Login />
</div>

---

只是为了确保-您是否将您的登录组件呈现为应用程序中某个GlobalContextProvider的子组件？不，登录组件是gatsby中的一个页面，这是否意味着我应该将上下文导入到

gatsby ssr.js

？不一定-我会在回答中解释，如果我想为登录用户创建全局状态，这是否在一般正确的解决方案中？所以，如果用户登录到

Login

组件中，整个应用程序都有用户登录的信息。是的，一般来说，这是有意义的。如果上下文提供程序中的状态发生更改，则只有使用它的组件才会重新加载，因此使您的状态为全局状态不会影响性能以及如何分解上下文提供程序以获取状态？这完全取决于您的状态结构。如果您遇到问题，通常MDN是一个很好的资源：

<React.Fragment>
    <GlobalContextProvider />
    <Login />
</React.Fragment>

<React.Fragment>
    <GlobalContextProvider>
        <Login />
    </GlobalContextProvider>
</React.Fragment>

const Index = () => (
    <Layout>
        <h1>{something that uses context}</h1>
    </Layout>
)

const Layout = ({children}) => (
    <GlobalContextProvider>
        {children}
    </GlobalContextProvider>
);

const IndexContent = () => {
    const {text} = useContext(GlobalStateContext);
    return <h1>{text}</h1>;
}

const Index = () => (
    <Layout>
        <IndexContent />
    </Layout>
);