React Native登录认证后无法跳转至对应角色页面问题求助

核心根因梳理 #

• 缺失isLoading状态声明：AuthProvider中直接调用了setIsloading方法，但没有提前定义对应的状态变量，会抛出未定义错误，打断后续逻辑执行
• 数据结构不一致：重启应用时路由层取的是res.data.user[0]作为用户信息，登录成功后直接赋值res.data.user，两者结构不同会导致role字段读取失败，路由条件判断失效
• 异步逻辑缺await：axios请求、AsyncStorage.setItem都是异步方法，未加await会导致外层try/catch无法捕获异常，也可能出现状态更新时序混乱

具体修复步骤 #

1. 修复AuthProvider.js代码 #

import { useState } from 'react';
import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';
import { Alert } from 'react-native';
// 这里补充你自己的AuthContext导入
import { AuthContext } from './authContext';

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    // 补上缺失的isLoading状态
    const [isLoading, setIsLoading] = useState(false);
    return (
        <AuthContext.Provider
            value={{
                user,
                setUser,
                isLoading,
                login: async (email, password) => {
                    setIsLoading(true)
                    try {
                        // 给axios加上await，捕获异步错误
                        const res = await axios({
                            method: 'POST',
                            url: URL,
                            // axios自动序列化对象，不用手动转JSON
                            data: { email, password },
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        })
                        const { auth, user: userD, token } = res.data;
                        if (auth === true) {
                            // 异步存储加await保证执行时序
                            await AsyncStorage.setItem("Token", token);
                            await AsyncStorage.setItem("userID", JSON.stringify(userD.user_id));
                            // 和重启时的取数逻辑对齐，保证数据结构一致
                            const formatUser = Array.isArray(userD) ? userD[0] : userD;
                            setUser(formatUser);
                            setIsLoading(false);
                            Alert.alert('登录成功');
                        } else {
                            setIsLoading(false);
                            Alert.alert('登录失败，请检查账号密码');
                        }
                    } catch (err) {
                        console.log("登录错误: ", err);
                        setIsLoading(false);
                        Alert.alert('网络异常，请稍后重试');
                    }
                }
            }}
        >
            {children}
        </AuthContext.Provider>
    )
}

2. 修正组件命名&补充路由兜底逻辑 #

检查CustomerStuckScreen、ResturantStuckScreen的文件名/导入名是否拼写错误（大概率是Stack不是Stuck），同时给路由判断加兜底避免异常：

// Routes.js里的渲染逻辑修改为
{user !== null ? (
    user.role === 'customer' ? (
        <StoreProvider store={store}>
            <CustomerStackScreen />
        </StoreProvider>
    ) : user.role === 'restaurant' ? (
        <RestaurantStackScreen />
    ) : (
        // role字段异常时回退到登录页
        <RootStackScreen />
    )
) : (
    <RootStackScreen />
)}

修复后登录成功时Context的user状态会正常更新，路由层消费到状态变化后会自动重渲染对应角色的路由栈，无需手动跳转。

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