反應上下文返回未定義

Question

不知道為什么會這樣，我已經檢查以確保狀態值不是未定義的，它不是，我看不出我哪里出錯了。

我的 authContext.js 文件

const initialState = {
  isAuthorized: false,
}

export const authContext = React.createContext() 

export default function AuthContextComp(props) {
  const [state, dispatch] = useReducer(reducer,initialState)

  return (
    <authContext.Provider authState={state}>
      {props.children}
    </authContext.Provider>
  )
}

function reducer(state, action){
  switch (action.type) {
    case 'signIn':
      return true;
      break;
  
    default:
      return state;
  }
}

我的應用文件

function MyApp({ Component, pageProps, appProps }) {

  return (
    <GlobalContextWrapper pageData={pageProps}>
      <AuthContextWrapper>
        <div style={{textAlign:'center',paddingTop: 200}}>
          <h2>Signed in</h2>
          <button>Log in or log out</button>
          <Component {...pageProps} />
          <Test/>
        </div>
      </AuthContextWrapper>
    </GlobalContextWrapper>
  );
}

export default MyApp;

我試圖使用上下文的組件

import React, {useContext} from 'react'
import {authContext} from '../global/authContext/AuthContext'

export default function Test() {
  const t = useContext(authContext)
  return (
    <div>
       This is the test component
    </div>
  )
}

你能看出這里有什么不對嗎？ 我正在使用 next.js 我不知道為什么不

Answer 1

問題是當將 state 傳遞給提供時，名稱應該是值。 不知道為什么會這樣

    <authContext.Provider  value={state}>
      {props.children}
    </authContext.Provider>