React中如何在Promise.then()外部使用API请求返回的数据

问题根源 #

1. 异步时序问题：axios.get是异步操作，then回调里的代码会在请求完成后执行，但你在外面直接console.log(dataFromDb)时，请求还没结束，所以数组是空的。
2. concat方法误用：concat不会修改原数组，而是返回一个新数组，所以你原有的dataFromDb根本没被更新。
3. 未使用React状态：即使数据更新了，普通变量的变化不会触发组件重新渲染，前端也看不到数据。

修正后的代码 #

import { Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material"
import { useEffect, useState } from "react";
import axios from "axios";

function RequestApproval() {
    // 用useState定义状态变量，存储从API获取的数据
    const [dataFromDb, setDataFromDb] = useState([]);

    // 用useEffect触发异步请求，依赖项为空数组确保只在组件挂载时执行一次
    useEffect(() => {
        axios.get("http://localhost:3001/all-user-addresses")
            .then((response) => {
                // 用setState更新状态，触发组件重新渲染
                setDataFromDb(response.data.result);
            })
            .catch((error) => {
                // 处理请求错误
                console.error("获取数据失败:", error);
            });
    }, []);

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
            <Box style={{ borderRadius: '16px', backgroundColor: '#6ea6be' }}>
                <List sx={{ width: '600px', maxWidth: '1000px' }}>
                    {/* 遍历状态数据生成ListView项 */}
                    {dataFromDb.map((item, index) => (
                        <ListItem key={index} disablePadding>
                            <ListItemButton>
                                <ListItemText primary={item /* 根据你的数据结构替换成对应字段 */} />
                            </ListItemButton>
                        </ListItem>
                    ))}
                </List>
            </Box>
        </div>
    );
}

export default RequestApproval;

关键改动说明 #

• useState：定义dataFromDb状态变量，用setDataFromDb更新数据，确保数据变化时组件重新渲染。
• useEffect：把API请求放在useEffect里，空依赖数组[]保证请求只在组件首次挂载时执行一次，避免重复请求。
• 直接更新状态：拿到API返回的数据后，直接用setDataFromDb把结果存入状态，替代原来的concat操作。
• 渲染列表：用map遍历状态数据，生成对应的ListItem，注意给每个列表项加唯一的key属性。

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