仅当从 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>}
    </>
    )

}