我在使用背景關系 api 在反應應用程式中重繪 頁面時遇到問題。在我的控制臺中重繪 頁面后，我看到了以下日志：
我的背景關系從 rest api 獲取資料，但只是第三次，原因是我的 span 在結束重繪 頁面后為空：/
這是我使用來自背景關系 api 的資料的組件。
標頭/index.tsx
const { currentAccount } = useContext(AppContext);
console.log("ACCOUNT: ", currentAccount);
return (
<span>{currentAccount?.name}</span>
);
這是我的應用程式背景關系
ApplicationContext.tsx
useEffect(() => {
checkLogin();
}, []);
const checkLogin = async () => {
console.log("checkLogin");
setLoggedIn(false);
const token = localStorage.getItem("session");
if (token) {
const decode = jwt(token);
const query = {
id: decode["id"]
};
const response: Account = await axios.get("/auth/account", query);
setCurrentAccount(response);
setLoggedIn(true);
} else {
setCurrentAccount(null);
setLoggedIn(false);
}
}
這也是我來自 App.tsx 的路由
<AppContextProvider>
{publicRouting.map(({ path, component }, i) => (
<Route key={i} path={path} component={component} />
))}
<Main>
{privateRouting.map(({ path, component }, i) => (
<Route key={i} path={path} component={component} />
))}
</Main>
</AppContextProvider>
有人可以告訴我如何僅在已從我的 rest api 獲取資料時渲染組件嗎？所有這些都是異步的，所以我需要等到資料進入應用程式
謝謝你的幫助！
uj5u.com熱心網友回復：
我個人喜歡在渲染這種型別的東西時采用以下方法：
const RenderOnFetch = () => {
const [data, setData] = useState({});
const [isLoading, setIsLoading] = useState(false);
useEffect(async () => {
await setIsLoading(true);
const fetchedData = await fetchData();
setData(fetchedData);
await setIsLoading(false);
}, []);
return (
<>
{isLoading && <p>Data is being loaded..</p>}
{!isLoading && <p>Data has been fetched..</p>}
</>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411662.html
標籤：