React上下文返回undefined

Question

不知道为什么会发生这种情况，我已经检查了，以确保状态值不是未定义的，它不是，我看不到我在哪里出错。

My 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;
}
}

My app file

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

问题是，当传递状态到提供时，名称应该是值。不知道为什么会这样

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