Reactjs Reaction路由的问题在Effect使用API调用响应设置状态之前呈现页面

我的React应用程序遇到了一个奇怪的问题. 这是一个模拟乙烯基store ，现在我正在研究"以前的订单"功能.我在useEffect块中向我的后端发送一个GET请求和我的令牌，并设置订单的状态.我通过上下文包装器获取的令牌本身. 然后我的组件应该呈现结果. 代码如下:

import { useContext, useEffect, useState } from 'react'

import AuthContext from '../context/AuthContextProvider';

import { fetchAllOrders } from '../api/api';
import OrderDetails from './OrderDetails';


export const Orders = () => {
    const authCtx = useContext(AuthContext);
    const token = authCtx.loggedInUserData.auth_token
    const [orders, setOrders] = useState({});

    useEffect(() => {
        async function getAllOrders() {
            console.log("effect ran", token)
            const response = await fetchAllOrders(token);
            console.log(response)

            setOrders(response);
            // setOrders(response.data);       // when using axios
        }

        getAllOrders();
    }, [token]);

    console.log(orders)
    return (
        <main>
            {orders.length > 0 && { token } && <div>
                {orders.map(order =>
                    <OrderDetails key={order.id} order={order} />
                )}
            </div>
            }
        </main>
    )

}

令人费解的是，该组件按预期工作，并在我从应用程序本身访问数据时呈现数据.API调用访问了正确的端点，身份验证中间件成功传递，响应格式正确，最终显示在我的FE上.

然而，一旦我刷新选项卡或直接在地址栏http://localhost:3001/orders中键入，我就会收到401错误.

如您所见，在第二个实例中，效果在令牌被获取并发送到API之前运行，因此是401响应.为什么会发生这种事？ 同样，在抛出错误之后，我似乎得到了预期的响应，但很明显，到那时应用程序已经崩溃了.一旦我添加了适当的错误处理，这可能就不再是问题了？ 我只是不明白为什么这款应用在这两种情况下会有不同的表现. 顺便说一句，整个app could be found here，因为可能有其他移动部件影响这一功能.