React Native应用Audit 5s登录注册时出现未处理Promise拒绝错误求助

问题根源 #

用户首次打开应用时，AsyncStorage.getItem("@auth")返回null，直接对null执行JSON.parse()结果仍为null，此时访问as.user触发类型错误，且原代码未处理异步操作异常，导致出现未处理Promise拒绝。

修复后的代码 #

import React, { useState, useEffect, createContext } from "react";
import axios from "axios";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { API } from "../confing";

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [state, setState] = useState({
    user: null,
    token: "",
  });

  axios.defaults.baseURL = API;

  useEffect(() => {
    const loadFromAsyncStorage = async () => {
      try {
        const data = await AsyncStorage.getItem("@auth");
        if (data) {
          const authData = JSON.parse(data);
          if (authData?.user && authData?.token) {
            setState(prevState => ({ 
              ...prevState, 
              user: authData.user, 
              token: authData.token 
            }));
          }
        }
      } catch (error) {
        console.error("加载本地认证数据失败:", error);
      }
    };

    loadFromAsyncStorage();
  }, []);

  return (
    <AuthContext.Provider value={[state, setState]}>
      {children}
    </AuthContext.Provider>
  );
};

export { AuthContext, AuthProvider };

关键修改点 #

• 异常捕获：用try/catch包裹异步操作和JSON解析，避免未处理Promise拒绝，同时打印错误信息便于调试
• 空值校验：先检查data是否存在再解析；解析后通过可选链authData?.user确保属性存在再访问
• 函数式更新state：使用setState(prevState => ...)代替直接依赖外部state变量，避免在空依赖数组的useEffect中获取过时的state值

额外注意事项 #

登录/注册成功后，需确保存入AsyncStorage的是结构正确的对象：

// 示例：保存认证数据到AsyncStorage
const saveAuthData = async (user, token) => {
  try {
    const authData = JSON.stringify({ user, token });
    await AsyncStorage.setItem("@auth", authData);
  } catch (error) {
    console.error("保存认证数据失败:", error);
  }
};

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