React Native中try/catch内逻辑运算符&&异常执行问题排查

核心问题 #

你代码里的&&逻辑之所以失效，是因为后面用了逗号表达式——逗号表达式的特性是所有子表达式会依次执行，最后返回最后一个表达式的结果。哪怕前面的Object.keys(UserStore.state.user).length为0（假值），后面的console.log、navigation()、setLoading(false)还是会全部执行。另外原代码的then回调写法也有问题：逗号分隔的两个操作，只有第一个会在请求成功后执行，第二个AuthStore.setToken()会直接立即执行，不符合预期。

解决方案 #

方案一：用if语句替代&&（推荐，逻辑更清晰）

修改后的代码：

try {
    await axios.post(`${BASE_URL}/api/moralis/login`, {
        userObjectId: id,
        sessionToken: sessionToken
    }).then((resp) => {
        // 多个操作要包在大括号里，确保都在请求成功后执行
        AsyncStorage.setItem('token', resp.data.user.token);
        AuthStore.setToken();
    })

    // 仅当用户详情存在时执行后续操作
    if (Object.keys(UserStore.state.user).length > 0) {
        console.log('run===>', Boolean(Object.keys(UserStore.state.user).length));
        navigation();
        setLoading(false);
    } else {
        // 可根据需求处理用户详情未加载的情况，比如提示或继续等待
        setLoading(false);
    }
} catch (error) {
    Errored(error);
    setLoading(false);
}

方案二：用函数包裹后续操作（保留&&写法）

如果一定要用&&，把后续操作封装成函数，仅在条件为真时调用：

try {
    await axios.post(`${BASE_URL}/api/moralis/login`, {
        userObjectId: id,
        sessionToken: sessionToken
    }).then((resp) => {
        AsyncStorage.setItem('token', resp.data.user.token);
        AuthStore.setToken();
    })

    // 函数包裹后，只有条件为真时才会执行内部操作
    Object.keys(UserStore.state.user).length > 0 && (() => {
        console.log('run===>', Boolean(Object.keys(UserStore.state.user).length));
        navigation();
        setLoading(false);
    })();
} catch (error) {
    Errored(error);
    setLoading(false);
}

额外注意：异步时序问题 #

用户详情是在token获取后加载的，可能存在时序差——登录请求完成后，用户详情的加载可能还没结束，此时直接判断UserStore.state.user会得到空值。如果是React+状态管理（比如MobX）场景，建议监听用户详情状态的变化：

// 函数组件中示例（以React Hooks为例）
useEffect(() => {
    if (Object.keys(UserStore.state.user).length > 0) {
        navigation();
        setLoading(false);
    }
}, [UserStore.state.user]); // 当用户详情状态更新时触发

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