React Expo中使用Axios发异步请求未返回就触发渲染报错如何解决

• React组件的渲染逻辑是同步执行的，你定义的sendGetRequest是异步函数，返回值是Promise对象而非JSX元素，组件渲染时无法直接读取异步函数内部返回的JSX，因此抛出无返回内容的错误。
• 你直接在组件顶层调用sendGetRequest()，该异步调用的返回结果没有被组件状态承接，渲染逻辑不会等待接口请求完成再执行，接口请求完成前渲染流程已经跑完，自然没有可返回的渲染内容。
• 异步请求不应该直接和渲染返回逻辑耦合，React中所有副作用（包括接口请求）都应该在合适的生命周期钩子/副作用钩子中执行，返回的接口数据需要用状态承接后再驱动渲染。

import { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import axios from 'axios';
// 其他你用到的依赖比如styles、EditScreenInfo自行保留

const YourComponent = () => {
  // 用state承接接口返回数据、加载状态、错误信息
  const [orderData, setOrderData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 在useEffect里执行异步请求
    const sendGetRequest = async () => {
      try {
        const resp = await axios.get(uri, {
          auth: {
            username: '*****',
            password: '****'
          }
        });
        setOrderData(resp.data);
      } catch (err) {
        console.error(err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    sendGetRequest();
  }, []); // 空依赖代表组件挂载后只执行一次

  // 渲染逻辑同步执行，根据状态判断要渲染的内容
  if (loading) {
    return <ActivityIndicator size="large" style={styles.container} />;
  }

  if (error) {
    return (
      <View style={styles.container}>
        <Text>请求失败，请稍后重试</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Action</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <Text>
        Order ID: {orderData.id}
        Nom client: {orderData.billing.first_name} {orderData.billing.last_name}
      </Text>
      <EditScreenInfo path="/screens/TabTwoScreen.tsx" />
    </View>
  );
};

export default YourComponent;

• 用useState定义三个状态分别管理接口返回数据、加载状态、错误状态，所有渲染内容都基于状态生成
• 用useEffect触发异步请求，避免每次组件重渲染都重复发起请求
• 渲染逻辑提前处理加载中、错误的边界场景，保证不管处于什么请求阶段都有合法的JSX返回

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