Android端React Native Expo POST登录请求未返回正确响应问题求解

问题根因与修复方案 #

你遇到的返回undefined问题由两个核心错误导致，按优先级修复即可：

1. 错误添加mode:"no-cors"配置
   React Native不存在浏览器的CORS跨域限制，添加该参数后会返回无法读取内容的不透明响应，直接删除这行配置即可。
2. 未解析fetch返回的Response对象
   fetch请求返回的是原生Response对象，不是接口返回的业务数据，需要先调用.json()方法解析响应体才能拿到error、token等业务字段。
   另外你代码中同时使用async/await和.then链式调用，逻辑冗余易出错，建议统一使用async/await写法优化逻辑。

修复后的完整代码 #

首先确保你已经安装并正确导入AsyncStorage：

// 先安装依赖：npx expo install @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';

修改后的submitHandler逻辑：

const submitHandler = async() => {
  try {
    const response = await fetch(`${API}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    });
    // 解析响应体为JSON
    const data = await response.json();
    if (data.error) {
      console.log("接口返回错误：", data);
    } else {
      console.log("返回的token：", data.token);
      if(data.token) {
        await AsyncStorage.setItem("jwt", data.token);
        await AsyncStorage.setItem("user", JSON.stringify(data.user));
      }
    }
  } catch (err) {
    console.log("请求异常：", err);
  }
};

其他注意点 #

• 如果接口返回非2xx状态码，.json()解析可能抛出异常，你可以先加response.ok判断，对4xx、5xx状态做单独处理
• TextInput组件建议给邮箱输入框加keyboardType="email-address"，密码输入框加secureTextEntry={true}隐藏输入内容，符合常规交互逻辑。

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