ユーザーログイン時にUseStateを使用し、変数を作成したい。

Question

実現したいこと

下記のコードで
console.log(hub)
console.log(hub2)
の箇所がコンソールでUndefinedになっているのを
実際のデータが入るようにしたい。

前提

ユーザーがログインした時に
下記のJsonデータが取得できるのですが

{
    "hubs": [
        "111.com",
        "222.com"
}

setHub関数を使い
hub変数に222.comというURLを代入したいのですが
Undefinedとなってしまいます。
不思議なのが
console.log(response.data.hubs[1])
の部分はコンソールに222.comと表示されています。

発生している問題・エラーメッセージ

hub変数がUndefinedとなってしまいます。。

該当のソースコード

const Login = () => {
  //ここ追記
  const dispatch = useDispatch();
  const [cookies, setCookie] = useCookies();
  const { register, handleSubmit, watch, errors } = useForm();

  const [hub, setHub] = useState();
  const [hub2, setHub2] = useState();
  console.log(hub)
  console.log(hub2)


  const getJwt = async (data) =>{

        const email_encoded = btoa(data.email)
        const password_encoded = btoa(data.password)
        axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
        await axios.get('xxx.com', {
          auth: {
            username: data.email,
            password: data.password,
          }
          })
        .then(function (response) {
          console.log("logged in!");
          setCookie('accesstoken', response.data.token, { path: '/' }, { httpOnly: true });
          setCookie('refreshtoken', response.data.refresh_token, { path: '/' }, { httpOnly: true });
          console.log(response.data.hubs[0])
          console.log(response.data.hubs[1])
          setHub(response.data.hubs[1]);
          setHub2(response);
        })
        .catch(err => {
            console.log("miss");
            alert("Email or Password is wrong!");
        });
      };

  return (
    <>
            <form onSubmit={handleSubmit(getJwt)}>
              <input placeholder='Email Address' className='form-control login_form' {...register('email')} />
              <div className="login_password_section">
                <input placeholder='Password' className='form-control login_form'  />
                <span
                    onClick={togglePassword}
                    role="presentation"
                    className="password_reveal"
                    >
                </span>
              </div>
            </form>

    </>

  );
}
export default Login;

{
    "hubs": [
        "111.com",
        "222.com"
}

Answer 1

下記のように解決しました。

https://teratail.com/questions/r06xqxqenzhywm

Answer 2

最初の描画は非同期処理となるAPI呼び出しが間に合わないので、初期値のundefinedがそのまま表示されます。

Comments

[Tomato_leaf]

ありがとうございます。
最終的にはログインと同時にDispatchを使って
dispatch(setMCUCondo(response.data.hubs[1]));
このように設定したいのですが、
これは無理なのでしょうか？

[maisumakun]

値が取れた後にそれらの結果は出ませんか？

[Tomato_leaf]

値がそもそもとれません。
console.log(response.data.hubs[1])
の部分では値が取れているのですが。。

[maisumakun]

<form onSubmit={handleSubmit(getJwt)}>のhandleSubmitはどこで定義されていますか？

[Tomato_leaf]

失礼しました。上記コードに追記しました。