React Native Expo GlobalProvider报错修复及自动跳转需求求助

报错信息 #

运行时错误 #

SyntaxError: /Users/pieczasz/Developer/Code/vodkie-app/src/context/GlobalProvider.ts: Unexpected token, expected "," (62:16)

类型错误 #

Type '{}' is missing the following properties from type 'ReactElement<any, any>': type, props, keyts(2739)
Cannot find namespace 'GlobalContext'.ts(2503)

错误原因 #

1. 运行时错误：代码中使用了HTML转义字符（如<、>、=>），TSX解析器无法识别这些字符，导致语法错误。
2. 类型错误：GlobalContext的引用/导出存在不规范问题，同时组件返回值类型定义不符合TS要求，可能还存在使用Provider时未正确传递子元素的情况。

修复后的完整代码 #

import React, {
    useState,
    useEffect,
    ReactNode,
    createContext,
    useContext,
} from 'react';
import { getCurrentUser } from '@/lib/appwrite';
import { useNavigate } from 'react-router-dom'; // 导入路由跳转钩子

// 定义GlobalProvider组件的props类型
interface GlobalProviderProps {
    children: ReactNode;
}

// 定义全局上下文的类型
interface GlobalContextType {
    isLoggedIn: boolean;
    setIsLoggedIn: (value: boolean) => void;
    user: any;
    setUser: (user: any) => void;
    isLoading: boolean;
}

// 创建全局上下文，设置默认值为undefined
export const GlobalContext = createContext<GlobalContextType | undefined>(
    undefined
);

// 自定义钩子，用于获取全局上下文
export const useGlobalContext = (): GlobalContextType => {
    const context = useContext(GlobalContext);
    if (context === undefined) {
        throw new Error('useGlobalContext必须在GlobalProvider内部使用');
    }
    return context;
};

// 全局状态提供者组件
export const GlobalProvider = ({
    children,
}: GlobalProviderProps): React.ReactElement => {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    const [user, setUser] = useState<any>(null);
    const [isLoading, setIsLoading] = useState(true);
    const navigate = useNavigate(); // 初始化路由跳转钩子

    // 初始化时获取当前用户状态
    useEffect(() => {
        getCurrentUser()
            .then((res) => {
                if (res) {
                    setIsLoggedIn(true);
                    setUser(res);
                } else {
                    setIsLoggedIn(false);
                }
                setIsLoading(false);
            })
            .catch((err) => {
                console.log(err);
                setIsLoading(false); // 即使出错也要更新加载状态
            });
    }, []);

    // 已登录用户自动跳转逻辑
    useEffect(() => {
        if (!isLoading && isLoggedIn) {
            navigate('/explore');
        }
    }, [isLoading, isLoggedIn, navigate]);

    return (
        <GlobalContext.Provider
            value={{ isLoggedIn, setIsLoggedIn, user, setUser, isLoading }}
        >
            {children}
        </GlobalContext.Provider>
    );
};

export default GlobalProvider;

关键修复与实现说明 #

1. 替换HTML转义字符：将代码中所有<、>、=>替换为正常的<、>、=>，解决语法解析错误。
2. 规范类型定义：将组件返回类型改为React.ReactElement，符合TS对React组件返回值的类型要求。
3. 添加自动跳转逻辑：
   • 导入react-router-dom的useNavigate钩子，用于页面跳转。
   • 新增useEffect监听isLoading和isLoggedIn状态，当加载完成且用户已登录时，自动跳转到/explore页面。
4. 上下文可用性保障：确保GlobalContext导出正确，自定义钩子useGlobalContext添加了上下文存在性校验，避免使用时出现未定义问题。

使用注意事项 #

• 必须将GlobalProvider包裹在react-router-dom的BrowserRouter（或其他Router组件）内部，否则useNavigate无法正常工作。
• 若不需要在Provider内直接处理跳转，也可以在登录页面或根组件中通过useGlobalContext获取状态后，自行实现跳转逻辑。

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