React Native中Fetch无法接收API响应问题排查求助

1. 核心代码错误：React组件不能定义为async函数 #

你的Test组件被声明为async () => {}，但React组件必须直接返回JSX元素，async函数返回的是Promise，这会直接导致React渲染逻辑崩溃——这就是console.log('test!')永远不会执行、应用无报错崩溃的根本原因。

修正后的代码 #

将异步请求逻辑移至useEffect钩子中，组件本身保持同步：

import React, {useState, useEffect} from 'react';
import { View, Text } from 'react-native';
import {getBackEndDomain} from "../utilities/utilities";

const Test = () => {
    const [data, setData] = useState('');
    const [domain, setDomain] = useState('');

    useEffect(() => {
        const fetchTestData = async () => {
            try {
                const apiDomain = getBackEndDomain();
                setDomain(apiDomain);
                console.log(apiDomain);
                
                const response = await fetch(`${apiDomain}/api/test`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                });
                console.log('test!');

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                setData(result);
                console.log(result);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };

        fetchTestData();
    }, []); // 空依赖数组确保组件挂载时仅执行一次请求

    return (
        <View>
            <Text>API Domain: {domain}</Text>
            <Text>Response: {data}</Text>
        </View>
    );
};

export default Test;

2. 全局配置排查（针对修改系统设置后失效的情况） #

安卓端：明文流量限制 #

如果你的Laravel API使用http协议，Android 9及以上版本默认禁止明文网络请求，需配置网络安全策略：

• 在android/app/src/main/res/xml下创建network_security_config.xml：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">你的API域名/本地IP</domain>
    </domain-config>
</network-security-config>

• 在AndroidManifest.xml的application标签中添加：

android:networkSecurityConfig="@xml/network_security_config"

iOS端：ATS配置 #

若使用http协议，需在Info.plist中添加ATS例外（更推荐指定具体域名而非全局允许）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>你的API域名/本地IP</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Expo环境适配 #

如果使用Expo开发，需在app.json/app.config.js中配置对应平台的网络规则：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSExceptionDomains": {
            "你的API域名/本地IP": {
              "NSIncludesSubdomains": true,
              "NSTemporaryExceptionAllowsInsecureHTTPLoads": true
            }
          }
        }
      }
    },
    "android": {
      "networkSecurityConfig": {
        "domainConfigs": {
          "cleartextTrafficPermitted": true,
          "domains": ["你的API域名/本地IP"]
        }
      }
    }
  }
}

3. 额外排查点 #

• 确认getBackEndDomain()返回的地址适配模拟器：安卓模拟器需用10.0.2.2代替localhost，iOS模拟器可直接用localhost；真机测试需使用电脑的局域网IP
• 检查Laravel日志，确认请求是否完整处理并返回响应（部分情况下请求到达但响应阶段出错）
• 尝试用axios替代fetch，可能获取更明确的错误提示

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