React Native组件调用axios.get遇报错，移除async无数据求助

核心问题分析 #

1. async组件导致渲染错误：React组件不能定义为async函数——async函数返回的是Promise对象，而React要求组件返回可渲染的React元素（JSX），因此会抛出Objects are not valid as a React child错误。
2. 移除async后请求无效果：直接在组件函数中写异步请求，组件初始化时虽会触发请求，但请求完成后不会触发组件重新渲染，导致dados数组始终为空，页面无内容。

正确实现方式 #

使用React的useState管理数据状态，useEffect触发异步请求，遵循状态更新驱动渲染的机制：

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import axios from 'axios'

export const PedidosCorrida = () => {
    // 用state存储接口返回的数据，而非直接存JSX
    const [corridas, setCorridas] = useState([]);
    // 存储请求加载状态，用于展示加载提示
    const [loading, setLoading] = useState(true);

    // useEffect触发异步请求，空依赖数组确保组件挂载时仅执行一次
    useEffect(() => {
        const fetchCorridas = async () => {
            try {
                const response = await axios.get("http://192.168.0.57:3000/corridas");
                // 假设接口返回数组，直接更新state
                setCorridas(response.data);
            } catch (error) {
                console.error('请求失败:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchCorridas();
    }, []);

    // 加载状态下显示提示
    if (loading) {
        return <Text>加载中...</Text>;
    }

    // 根据接口数据渲染JSX
    return (
        <View>
            {corridas.length === 0 ? (
                <Text>暂无订单</Text>
            ) : (
                corridas.map((corrida, index) => (
                    <View key={index} style={{ marginVertical: 8 }}>
                        <Text>
                            {index + 1} <Button title='fazer corrida' onPress={() => {/* 添加按钮点击逻辑 */}} />
                        </Text>
                    </View>
                ))
            )}
        </View>
    );
}

const styles = StyleSheet.create({
    container: {},
    text: {
        color: '#fff'
    }
});

额外注意点 #

1. 修复组件使用的语法错误：你的Procurar组件存在标签不匹配问题，修改后：

export const Procurar = () => {
    return (
        <View>
            <PedidosCorrida />
        </View>
    )
}

组件标签需自闭合（<PedidosCorrida />），且外层只能有一个根元素（用View包裹）。

2. 遵循React数据流模式：不要在异步回调中直接生成JSX，应先将接口数据存入state，再通过map渲染JSX，保证状态与视图同步。

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