Reactjs 登录后在上下文中加载API数据

我有一堆组件，它们的状态驻留在上下文API中

//App.js
常量应用=（）=>{
返回(
);
};

//context.js
export const MarketContext=createContext（）；
const MarketContextProvider=（道具）=>{
const[data，setData]=useState（[]）；
useffect（（）=>{
//从API获取数据并存储
const myData=wait getData（）；
setData（myData）；
}, [])
返回(
{props.children}
)
}

问题是，只要用户加载登录页面，就会触发上下文，并且由于用户尚未登录，所有API调用都会导致401。当用户最终登录时，组件（主页、产品、订单）不会显示任何数据，因为它们仍在引用过时的上下文

用户必须在登录后刷新页面才能加载数据。这样，上下文中的API调用将成功触发

如何避免此问题并仅在用户登录后在上下文中加载数据