React Native集成Django认证遇TypeError：无法读取isLoggedIn属性

错误根源 #

你遇到的TypeError: Cannot read property 'isLoggedIn' of undefined，核心原因是App组件本身不在Provider的上下文范围内：

• 你在App组件的函数体里调用了useContext(Context)，但Provider是在App的return语句中才渲染的。这意味着当App组件执行到const globalContext = useContext(Context);时，Provider还没生效，useContext自然拿不到任何值，返回undefined，解构isLoggedIn就会报错。

修复方案 #

把需要使用Context的逻辑移到Provider包裹的子组件中，让子组件处于上下文范围内。修改后的App.js代码如下：

import React, { useEffect } from "react";
import {
    AppRegistry,
    View,
} from "react-native";
import SplashScreen from "react-native-splash-screen";
import { NavigationContainer } from "@react-navigation/native";

import AppNavigator from "./Navigation/AppNavigator";
import { Context, Provider } from "./Auth/AuthContext";
import Login from "./Screens/LoginScreen";

// 单独抽离需要使用Context的业务逻辑组件
function AppContent() {
    const globalContext = React.useContext(Context);
    const { isLoggedIn } = globalContext;

    return (
        <View style={{ flex: 1 }}>
            <NavigationContainer>
                {isLoggedIn ? <AppNavigator /> : <Login />}
            </NavigationContainer>
        </View>
    );
}

export default function App() {
    useEffect(() => {
        SplashScreen.hide();
    }, []);

    // 让Provider包裹子组件，确保子组件能访问上下文
    return (
        <Provider>
            <AppContent />
        </Provider>
    );
}

AppRegistry.registerComponent("Provisioner", () => App);

额外提示 #

1. 你的AuthContext里的initAppSettings函数会在Provider挂载时发起后端请求，目前后端未开发，可能会在控制台抛出网络错误，可以暂时注释掉这个useEffect，避免干扰调试：

// useEffect(() => {
//     initAppSettings();
// }, []);

2. 后续开发登录功能时，只要在Login组件中通过useContext(Context)拿到setIsLoggedIn，点击按钮时调用setIsLoggedIn(true)，就能正常切换到AppNavigator了。

内容的提问来源于stack exchange，提问作者Tycho Systems