时间戳

首页 > 解决方案 > 登录后在 Context 中加载 API 数据

reactjs - 登录后在 Context 中加载 API 数据

问题描述

我有一堆组件，它们的状态驻留在 Context API 中。

// App.js

const App = () => {
  return (
    <BrowserRouter>
      <MarketContextProvider>
        <Route path="/login" component={Login} />
        <Route path="/" component={Home} />
        <Route path="/products" component={Products} />
        <Route path="/orders" component={Orders} />
      </MarketContextProvider>
    </BrowserRouter>
  );
};
   

// context.js

export const MarketContext = createContext();

const MarketContextProvider = (props) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // fetch data from API and store
    const myData = await getData();
    setData(myData);
  }, [])

  return (
    <MarketContext.Provider value={{data}}>
      {props.children}
    </MarketContext.Provider>
  )
}

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

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

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

标签： reactjs

解决方案

推荐阅读