React Native 组件异常：undefined 不是对象 (evaluating_useContext.isAuthenticated

Question

我正在尝试对用户进行身份验证并从另一个文件中提取上下文。我觉得我做的事情很简单，但我总是犯同样的错误。我是不是导入了 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>
  );
};

Answer 1

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

export const AuthenticationContext = createContext();

所以 useContext(AuthenticationContext) 将 return undefined。因此，当您尝试解构和读取 isAuthenticated 属性时，它会抛出此错误。看来你需要你的上下文是一个对象 isAuthenticated 属性.

您可能会发现阅读 React 上下文的基础知识很有帮助 here, and specifically about useContext here。

React Native 组件异常：undefined 不是对象 (evaluating_useContext.isAuthenticated

React Native Component Exception: undefined is not an object (evaluating_useContext.isAuthenticated

javascript

jsx

reactjs

react-native