React Native应用从Express服务器拉取数据无返回问题求助

问题原因&解决方法 #

1. 核心错误：未解析fetch返回的Response对象
   fetch请求返回的是一个包含响应元信息的Response对象，不是接口直接返回的业务数据，你需要主动调用.json()方法解析响应体的JSON内容才能拿到你需要的{"abc":123}数据。
   修改前端getData方法如下：

const getData = async () => {
   try {
    const response = await fetch('http://localhost:5000/');
    // 新增这行解析JSON响应
    const result = await response.json();
    setData(result);
    // 可添加打印验证数据是否正常获取
    console.log(result)
  } catch (error) {
    console.error(error);
  } finally {
    setLoading(false);
  }
}

2. 后续安卓端运行的适配注意事项
   你现在在浏览器端运行可以用localhost，但后续如果打包到安卓模拟器/真机运行，需要做两个修改：

• 将请求地址中的localhost替换为你运行后端服务的电脑的局域网IP，格式为http://[你的电脑局域网IP]:5000，因为安卓设备的localhost指向设备自身，不是你跑后端的电脑。
• 安卓9及以上系统默认禁止明文HTTP请求，如果你的后端没有配置HTTPS，需要在安卓项目的AndroidManifest.xml中application标签下添加android:usesCleartextTraffic="true"配置，允许明文请求。

3. 额外优化点
   你当前data的初始化值是数组，但后端返回的是对象，建议统一类型避免后续逻辑报错，可以把初始化改为const [data, setData] = useState({});，渲染的时候直接取data.abc即可拿到123的数值。

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