reactで条件分岐のタイミングをAPIを所得した後にしたいです。

Question

実現したいこと

reactで条件分岐のタイミングをAPIを所得した後にしたい

前提

現状if文でAPIの値(ユーザー名)があるかどうかを確かめているのですが、リロードした際にif文がAPI取得前に処理されてしい、値がない場合の動きをしてしまいます。

該当のソースコード

userpage.tsx


import { useUserStore } from 'src/user';

import { Login } from 'src/Login';

export const UserPage = () => {
  
  const user = useUserStore((state) => state.user);
  if (!user?.name) {
      return <Login />;
    }

  return (
    <AppBar>
       <Box>
          {user?.name}
       </Box>
    </AppBar>
}

試したこと

useEffectの使用を考えたのですが、値が途中でなくなる事を考慮した結果使うことを断念しました。

Answer 1

reactで条件分岐のタイミングをAPIを所得した後にしたい

本気でそれをやりたいのであれば、「APIをコンポーネントの外側で取得してからReactをマウントする」ことが必要となります。

ファーストビューの表示処理は同期的に進むのに対して、APIの処理は非同期的なので、同じコンポーネントの内部からAPIアクセスを行った場合、最初の描画はAPIの取れる前に行うしかありません。

Comments

[maisumakun]

「ロード中…」のような表示を用意するのが現実的な解決策です。

[uniuonbiz]

ありがとうございます。
「ロード中…」については検討させていただきます。
１つ質問なのですが、今回のuserpage.tsxの親ページでpropsにてユーザー名を渡し、userpage.tsxでユーザー名の有無を確かめた場合、「APIをコンポーネントの外側で取得してからReactをマウントする」を実現できるでしょうか？