僅當從 API 獲取數據時如何渲染組件？

Question

我在使用上下文 api 刷新頁面時遇到問題。 在我的控制台中刷新頁面后，我看到了以下日志：

我的上下文從 rest api 獲取數據，但只是第三次，原因是我的跨度在結束刷新頁面后為空：/

這是我使用上下文 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 獲取數據時渲染組件嗎？ 所有這些都是異步的，所以我需要等到數據進入應用程序

謝謝你的幫助！

Answer 1

我個人喜歡在渲染這種類型的東西時采用以下方法：

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>}
    </>
    )

}