React中如何获取GET请求响应值并传入render语句渲染

• 所有加了async关键字的函数，返回值永远会被包装成Promise，同步执行的render方法不可能直接拿到Promise异步解析完成后的最终值，你在render里直接打印jsonHandler()看到Promise是必然结果
• 绝对不要在render里直接调用异步请求函数：render会在组件每次重渲染时反复执行，会造成重复发请求、状态乱跳的问题
• React类组件拿异步数据的标准逻辑：组件挂载完成后发请求，拿到数据存到组件内部state里，state更新会自动触发组件重渲染，这时候render里就能直接读到已经请求完成的目标数据

import React, { Component } from 'react';
import axios from 'axios';

// 异步请求函数保留即可，注意不要混用await和.then写法，选一种写法更清晰
async function jsonHandler () {
    const url = "http://localhost/index.php";
    const { data } = await axios.get(url);
    console.log(data.data); // 这里打印的就是你需要的接口返回数据
    return data.data;
}

class Menu extends Component {
    constructor(props) {
        super(props);
        // 初始化state：menuData存接口返回的目标数据，loading标记加载状态
        this.state = {
            menuData: null,
            loading: true
        }
    }

    // 组件挂载完成后发起异步请求，整个生命周期只会执行一次
    async componentDidMount() {
        try {
            const resData = await jsonHandler();
            // 请求成功更新state，自动触发组件重渲染
            this.setState({
                menuData: resData,
                loading: false
            })
        } catch (err) {
            // 处理请求报错场景，避免页面卡死
            console.error('请求菜单数据失败:', err);
            this.setState({
                loading: false
            })
        }
    }

    // 你原有mainHandler的逻辑不需要改动
    mainHandler(data) {
        // 这里写你原本处理菜单数据的业务逻辑即可
        return data ? data.map(item => <div key={item.id}>{item.name}</div>) : null
    }

    render() {
        const { loading, menuData } = this.state;
        // 加载中展示提示，避免数据未返回时调用mainHandler传空报错
        if (loading) {
            return <div className="MenuWrap">数据加载中...</div>
        }
        // 数据加载完成后，直接传入state中存储的最终数据即可
        return <div className="MenuWrap">{this.mainHandler(menuData)}</div>;
    }
}

export default Menu;

• 如果要改用fetch发请求，只需要修改jsonHandler内部的请求逻辑即可，组件层的state、生命周期写法完全不需要调整
• 不要尝试在render里写jsonHandler().then(res => {xxx})直接赋值，render同步执行时拿不到then回调里的结果，还会触发重复渲染死循环

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