上下文：无法读取未定义的属性

Question

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

./addons/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>
  );
}

./screens/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 的 child，那么这将不起作用。记录了一般工作流程 here。因此，如果 ProfileScreen 不是 Provider 的 child，上下文将不可用。

执行此操作的常用方法是将上下文提供程序定义为应用程序中的顶级元素，如果您希望上下文在应用程序中的全局级别可用。

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>
   )
}

上下文：无法读取未定义的属性

Context: Cannot read properties of undefined

react-native