React结合Axios访问/dashboard时不等接口响应直接跳转如何解决？

架构老林

2026-10-6

解决方案

核心问题

你将axios请求直接写在组件根作用域，组件每次渲染都会重复触发请求，且React组件渲染逻辑是同步的，不会等待异步请求返回再执行return语句
loggedin初始值为undefined，第一次渲染时就会触发<Redirect />直接跳转登录页，等接口返回更新state时页面已经跳转完成，状态更新不会生效

修复方案

新增loading状态，接口请求未返回时渲染加载占位，不执行跳转逻辑
把axios请求包裹在useEffect钩子中，仅在组件首次挂载时触发一次，避免重复调用
给loggedin设置明确的初始布尔值false，避免类型歧义

修正后代码如下：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Redirect } from 'react-router';
import OverallCondition from "./dashOverall";
import Toolbar from "./dashToolbar";

export default function Dashboard(){
    const [loggedin, setLoggedin] = useState(false)
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        axios.get('/loggedin')
            .then(response => {
                setLoggedin(response.data)
            })
            .catch(err => console.error(err))
            .finally(() => {
                setLoading(false)
            })
    }, [])

    if(loading) {
        return <section className='dashboard'><p>加载中...</p></section>
    }

    return <section className='dashboard'>
            {loggedin ? <div>
                <Toolbar/>
                <OverallCondition/>
            </div> : <Redirect to='/login'/>}
    </section>
}