React Native API连接异常：登录需修改文件后生效问题求助

问题描述 #

实现用户登录功能时遇到以下异常：

• 只有修改包含fetch或XMLHttpRequest的文件并保存后，登录请求才能正常触发并返回结果
• 更换笔记本IP地址后，该问题会再次出现
• 已尝试更换API调用方式（XHR换fetch）、将请求逻辑移至组件同文件，均未解决问题

相关代码 #

login.ts

export function login(email: string, password: string) {
    const data = {
      username: email,
      password: password,
    };
    console.log("Attempt to login: ", data);

    let xhr = new XMLHttpRequest();

    xhr.open("POST", `${API}/login`);
    xhr.setRequestHeader("content-type", ContentType.APPLICATION_URLENCODED);
    xhr.send(encodeBody(data));

    xhr.onreadystatechange = async function () {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        const data = JSON.parse(xhr.responseText);
        await AsyncStorage.setItem("token", data.token);
        navigate('Home');
      }
    };
    xhr.onerror = function (e) {
        console.error(e.target);
    }
}

Login.tsx

<LoginButton title="Login" onPress={() => login(email, password)} />

排查与解决方向 #

1. API地址配置检查

   • 确认API常量是否为硬编码的固定IP，若为固定值，更换笔记本IP后可能出现网络不通或跨域问题。建议改用环境变量配置（比如通过react-native-dotenv加载.env文件中的API地址），或使用相对路径（需确保APP与API服务器在同一网络环境）
   • 直接用Postman/浏览器调用${API}/login接口，验证当前IP下接口是否可正常访问，排除网络层面的连通性问题

2. Metro缓存与热重载问题

   • 完全重启Metro服务（关闭后重新执行npx react-native start），同时清除APP缓存（iOS模拟器重置内容和设置，Android在系统设置中清除APP数据）
   • 禁用热重载，使用全量刷新（按R键）测试，判断是否为热重载的缓存机制导致旧逻辑未更新

3. XHR异步逻辑优化

   • 当前onreadystatechange回调中使用async/await存在潜在的执行顺序问题，建议添加错误捕获并优化逻辑：

     xhr.onreadystatechange = async function () {
       if (xhr.readyState === XMLHttpRequest.DONE) {
         try {
           const data = JSON.parse(xhr.responseText);
           await AsyncStorage.setItem("token", data.token);
           navigate('Home');
         } catch (err) {
           console.error('登录响应解析失败:', err);
         }
       }
     };
     

   • 添加超时设置避免请求挂起：xhr.timeout = 5000;，同时补充ontimeout回调处理超时场景

4. 网络权限与安全策略检查

   • Android端确认AndroidManifest.xml已添加网络权限：<uses-permission android:name="android.permission.INTERNET" />
   • iOS端若使用HTTP接口，需在Info.plist中配置NSAppTransportSecurity允许不安全连接
   • 检查API服务器是否有IP白名单限制，更换IP后需将新IP加入白名单

5. 重置Metro缓存

   • 执行npx react-native start --reset-cache彻底清理Metro的缓存，避免旧代码残留导致异常

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