Context:不能读取undefined的属性

Question

我试图保持用户是否登录的实时状态，因此我可以显示他或不显示组件中的特定元素。使用这个代码，它应该是console.log(0)，然后是console.log(1)，但它实际上抛出了一个错误Cannot read properties of undefined。

。/插件/Signed.js:

import { useState, createContext } from "react";
export const SignedContext = createContext();
export default function SignedProvider(props) {
const [SignedIn, setSignedIn] = useState(0);
return (
<SignedContext.Provider value={{ SignedIn, setSignedIn }}>
{props.children}
</SignedContext.Provider>
);
}

。/屏幕/Profile.js:

import { useContext } from "react";
import SignedContext from "../addons/Signed";
...
const ProfileScreen = () => {
const { SignedIn, setSignedIn } = useContext(SignedContext);
console.log(SignedIn);
setSignedIn(1);
console.log(SignedIn);
...
}
...

Answer 1

您在SignedContext中使用named export，但在Profile中使用default import。因此，您必须对导入使用花括号。以下内容应该可以改变您的问题。

import { SignedContext } from ".../addons/Signed"

编辑:如果ProfileScreen不是SignedContext.Provider的子节点，那么这将不起作用。这里记录了一般的工作流程。因此，如果ProfileScreen不是Provider的子节点，它将无法获得上下文。

通常的做法是，如果你想让上下文在应用中全局可用，就把上下文提供程序定义为应用中的顶层元素。

function App = () => {
const [signedIn, setSignedIn] = useState(0)
const contextValue = React.useMemo(() => ({signedIn, setSignedIn}), [singedIn])
// your application structure must be wrapped inside here.
// as an example I have only used ProfileScreen. 
// Usually this is your root stack.
return (
<SignedContext.Provider value ={contextValue}>
<ProfileScreen />
</SignedContext.Provider>
)
}