React Native 组件异常：未定义不是对象（evalating_useContext.isAuthenticated答案

【问题标题】：React Native Component Exception: undefined is not an object (evaluating_useContext.isAuthenticatedReact Native 组件异常：未定义不是对象（evalating_useContext.isAuthenticated
【发布时间】：2022-01-08 11:16:03
【问题描述】：

我正在尝试对用户进行身份验证并从另一个文件中提取上下文。我觉得我做的事情很简单，但我一直遇到同样的错误。我是不是导入 useContext 错了？

import React, { useContext } from "react";
import { NavigationContainer } from "@react-navigation/native";

import { AppNavigator } from "./app.navigator";
import { AccountNavigator } from "./account.navigator";

import { AuthenticationContext } from "../../services/authentication/authentication.context";

export const Navigation = () => {
  const { isAuthenticated } = useContext(AuthenticationContext);

  return (
    <NavigationContainer>
      {isAuthenticated ? <AppNavigator /> : <AccountNavigator />}
    </NavigationContainer>
  );
};

以下用户请求的上下文以帮助提供更多信息

import React, { useState, createContext } from "react";
import * as firebase from "firebase";

import { loginRequest } from "./authentication.service";

export const AuthenticationContext = createContext();

export const AuthenticationContextProvider = ({ children }) => {
  const [isLoading, setIsLoading] = useState(false);
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  const onLogin = (email, password) => {
    setIsLoading(true);
    loginRequest(email, password)
      .then((u) => {
        setUser(u);
        setIsLoading(false);
      })
      .catch((e) => {
        setIsLoading(false);
        setError(e);
      });
  };

  return (
    <AuthenticationContext.Provider
      value={{
        user,
        isLoading,
        error,
        onLogin,
      }}
    >
      {children}
    </AuthenticationContext.Provider>
  );
};

【问题讨论】：

从../../services/authentication/authentication.context导出了什么？
你好罗宾！将立即使用此信息更新帖子
谢谢。所以你没有向createContext 调用传递任何东西，所以useContext 将返回undefined。看来你需要你的上下文是一个具有isAuthenticated 属性的对象。
哦，好的，我会把这个作为答案[编辑：现在完成]。不知道这是否足够 - 认为这更像是一个正确方向的刺激，而不是“实际答案”，这是我在 SO 活跃几年后仍然难以决定的事情！很高兴我能帮上忙。

标签： javascript reactjs react-native jsx

【解决方案1】：

您没有在此处向createContext 调用传递任何内容：

export const AuthenticationContext = createContext();

所以useContext(AuthenticationContext) 将返回undefined。因此，当您尝试解构并读取isAuthenticated 属性时，它将引发此错误。看来你需要你的上下文是一个具有isAuthenticated 属性的对象。

阅读 React 上下文 here 的基础知识，尤其是关于 useContext here 的基础知识可能会有所帮助。

【讨论】：

谢谢你的回答！