React Native Expo：调用API时FlatList移动端不显示问题求助

核心问题分析 #

1. localhost 访问限制：网页端的localhost指向本地开发服务器，但移动端（真机/模拟器）的localhost是设备自身，无法访问电脑上的API服务，导致移动端请求失败、无数据返回。
2. Hook 状态赋值逻辑错误：无论请求哪个接口（client/reseller/collector），都将response.data同时赋值给三个状态，数据逻辑混乱，可能导致状态被错误覆盖。
3. 错误信息未暴露：组件未渲染error状态，移动端即使请求失败也无法直观看到问题。

具体修复步骤 #

1. 替换 localhost 为局域网IP #

将API请求的url从http://localhost:8080/client改为电脑的局域网IP地址（可通过ipconfig/ifconfig查询），确保移动端和电脑在同一网络下。
例：

sendRequest({
    method: 'GET', 
    url: "http://192.168.1.100:8080/client" // 替换为你的电脑局域网IP
})

• Android模拟器可额外使用10.0.2.2映射电脑localhost，但局域网IP更通用。

2. 修复RestAPI Hook的状态赋值逻辑 #

根据请求的接口路径，仅更新对应状态，避免数据混乱：

export interface IClient{
    client_id: number, 
    username: string, // 类型用小写string，而非构造函数String
    password: string, 
    fullName: string, 
    address: string, 
    email: string, 
}

export interface IReseller {
    reseller_id: number;
    // 补充你的字段
}

export interface ICollector {
    collector_id: number;
    // 补充你的字段
}

export const RestAPI = () => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");
    const [client_user, setClientUser] = useState<IClient[]>([]); 
    const [reseller_user, setResellerUser] = useState<IReseller[]>([]); // 统一初始化空数组
    const [collector_user, setCollectorUser] = useState<ICollector[]>([]);

    function sendRequest(config: AxiosRequestConfig<any>) {
        setLoading(true);
        axios(config)
            .then((response) => {
                setError('');
                // 根据URL路径匹配对应状态更新
                if (config.url?.includes('/client')) {
                    setClientUser(response.data);
                } else if (config.url?.includes('/reseller')) {
                    setResellerUser(response.data);
                } else if (config.url?.includes('/collector')) {
                    setCollectorUser(response.data);
                }
            })
            .catch((error) => {
                setError(error.message);
                console.error('API请求失败:', error); // 打印详细错误到控制台
            })
            .finally(() => setLoading(false))
    }
    return [sendRequest, loading, error, client_user, reseller_user, collector_user] as const;
}

3. 组件中添加错误与加载状态显示 #

在SendCollectors.tsx中渲染错误信息和加载提示，方便排查问题：

export default function SendCollectors(){
    const [sendRequest, loading, error, client_user] = RestAPI(); 

    useEffect(() => {
        sendRequest({
            method: 'GET', 
            url: "http://192.168.1.100:8080/client"
        })
    },[] )

    return(
        <SafeAreaView>
            <View style={styles.container}>
                <Text style={styles.textHeader} >Assign Collectors</Text>
                {/* 显示错误信息 */}
                {error && <Text style={{color: 'red', padding: 10}}>{error}</Text>}
                {/* 加载状态提示 */}
                {loading && <Text style={{padding: 10}}>加载中...</Text>}
                <FlatList
                    data={client_user}
                    keyExtractor={(client: IClient) => client.client_id.toString()}
                    renderItem={({ item: client }) => (
                        <SendCollectorsList
                        client_id={client.client_id}
                        fullname={client.fullName}
                        />
                    )}
                />
            </View>       
        </SafeAreaView>
    );
}

4. 配置移动端HTTP请求权限 #

在app.json中添加配置，允许HTTP请求（本地开发默认非HTTPS）：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true
        }
      }
    },
    "android": {
      "usesCleartextTraffic": true
    }
  }
}

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