質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

579閲覧

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

Tomato_leaf

総合スコア173

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/02/20 06:48

編集2023/02/20 10:13

実現したいこと

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

前提

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

Json

1{ 2 "hubs": [ 3 "111.com", 4 "222.com" 5}

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

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

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

該当のソースコード

React.js

1 2const Login = () => { 3 //ここ追記 4 const dispatch = useDispatch(); 5 const [cookies, setCookie] = useCookies(); 6 const { register, handleSubmit, watch, errors } = useForm(); 7 8 const [hub, setHub] = useState(); 9 const [hub2, setHub2] = useState(); 10 console.log(hub) 11 console.log(hub2) 12 13 14 const getJwt = async (data) =>{ 15 16 const email_encoded = btoa(data.email) 17 const password_encoded = btoa(data.password) 18 axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*'; 19 await axios.get('xxx.com', { 20 auth: { 21 username: data.email, 22 password: data.password, 23 } 24 }) 25 .then(function (response) { 26 console.log("logged in!"); 27 setCookie('accesstoken', response.data.token, { path: '/' }, { httpOnly: true }); 28 setCookie('refreshtoken', response.data.refresh_token, { path: '/' }, { httpOnly: true }); 29 console.log(response.data.hubs[0]) 30 console.log(response.data.hubs[1]) 31 setHub(response.data.hubs[1]); 32 setHub2(response); 33 }) 34 .catch(err => { 35 console.log("miss"); 36 alert("Email or Password is wrong!"); 37 }); 38 }; 39 40 return ( 41 <> 42 <form onSubmit={handleSubmit(getJwt)}> 43 <input placeholder='Email Address' className='form-control login_form' {...register('email')} /> 44 <div className="login_password_section"> 45 <input placeholder='Password' className='form-control login_form' /> 46 <span 47 onClick={togglePassword} 48 role="presentation" 49 className="password_reveal" 50 > 51 </span> 52 </div> 53 </form> 54 55 </> 56 57 ); 58} 59export default Login;

Json

1{ 2 "hubs": [ 3 "111.com", 4 "222.com" 5}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

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

https://teratail.com/questions/r06xqxqenzhywm

投稿2023/02/21 09:58

Tomato_leaf

総合スコア173

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2023/02/20 07:00

maisumakun

総合スコア144995

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tomato_leaf

2023/02/20 07:13

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

2023/02/20 07:38

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

2023/02/20 07:55

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

2023/02/20 10:01 編集

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

2023/02/20 10:13

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。