Axios GET响应无法存入全局变量，React App函数访问报错

问题根源 #

• 异步请求是非阻塞执行的：App组件渲染时，你的自执行异步函数还没完成API请求，此时全局变量response还是初始的null，直接访问response.data.body必然报错。
• React组件不能是async函数：组件函数必须返回JSX元素，而async函数返回的是Promise，完全不符合React组件的要求。

正确实现方式（React Hooks 标准写法） #

把异步请求逻辑放到组件的useEffect钩子中，用useState管理请求状态和数据，这是React处理异步数据的常规方案：

import { useState, useEffect } from 'react';
import axios from 'axios';

async function getAllTutors() {
    try {
        const response = await axios.get('API...');
        console.log("getAllTutors(): " + JSON.stringify(response.data.body));
        return response.data.body; // 直接返回需要的数据，减少层级嵌套
    } catch (error) {
        console.error('获取导师数据失败:', error);
        return [];
    }
}

function App() {
    // 用state管理数据、加载状态、错误信息
    const [tutors, setTutors] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    // 组件挂载时执行异步请求
    useEffect(() => {
        const fetchData = async () => {
            try {
                const data = await getAllTutors();
                setTutors(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, []); // 空依赖数组表示只在组件挂载时执行一次

    // 根据不同状态渲染对应内容
    if (isLoading) return <div>加载中...</div>;
    if (error) return <div>加载失败: {error}</div>;

    return (
        <div>
            {/* 这里直接使用tutors状态数据 */}
            {tutors.map(tutor => (
                <div key={tutor.id}>{tutor.name}</div>
            ))}
        </div>
    );
}

为什么不推荐用全局变量？ #

• React是状态驱动渲染的，全局变量的变化不会触发组件重新渲染——就算后续请求完成更新了全局变量，App组件也不会自动刷新去读取最新值。
• 全局变量在React应用中会导致状态难以追踪，容易引发不可预测的bug，完全不符合React的设计理念。

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