実現したいこと
下記のコードで
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}
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。