React中使用Axios获取API数据时首次渲染返回空数组问题

你的代码存在两个关键问题，导致数据无法正常渲染：

1. map回调未返回组件 #

你在result.map里使用了带大括号的箭头函数，但没有显式返回<ExpenseItem>组件，所以遍历后没有生成任何DOM元素。

2. 异步请求的初始状态处理 #

首次渲染时result是空数组是正常现象——因为Axios请求是异步的，组件会先以初始空数组渲染，等请求完成后才会更新状态重新渲染。不过你可以添加加载状态优化用户体验。

修复后的完整代码 #

const ExpenseList = () => {
    const [result, setResult] = useState([]);
    const [isLoading, setIsLoading] = useState(true); // 添加加载状态

    const expenseDetails = async () => {
        try {
            const res = await axios.get("http://127.0.0.1:8000/expense");
            setResult(res.data);
        } catch (e) {
            console.log(e);
        } finally {
            setIsLoading(false); // 请求结束后无论成功失败都关闭加载状态
        }
    };

    useEffect(() => {
        expenseDetails();
    }, []);

    if (isLoading) {
        return <div>加载中...</div>; // 加载时显示提示
    }

    return (
        <Container className='list-group'>
            <Row className='title-row'>
                <Col className='title-col-expenses'>Expenses</Col>
            </Row>
            {
                result.map((item) => (
                    <ExpenseItem 
                        key={item.id} // 必须添加key属性，React列表渲染要求
                        id={item.id} 
                        name={item.name} 
                        cost={item.cost} 
                    />
                ))
            }
        </Container>
    )
}

关键修复点说明 #

• map返回组件：把箭头函数的大括号{}改成小括号()，箭头函数会自动返回内部的JSX；或者在大括号里添加return语句。
• 添加key属性：React列表渲染时必须给每个子元素添加唯一的key，这里用item.id最合适。
• 加载状态：通过isLoading状态在请求未完成时显示加载提示，避免页面出现空内容。

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