実現したいこと
LoginPage.js内のhandleRegister内でtry catchのtryの部分でリダイレクトを設定しておりエラーの場合はリダイレクトせず、ログインが成功した場合のみリダイレクトしたい。
発生している問題・分からないこと
LoginPage.js内のログインボタンが押されたときに発火するhandleLoginにてログイン成功時のみリダイレクトしたいのですがログイン失敗時にもリダイレクトされてしまう。
エラーメッセージ
error
1xhr.js:258 2 3 4 POST http://localhost:5002/api/auth/login 400 (Bad Request) 5dispatchXhrRequest @ xhr.js:258 6xhr @ xhr.js:49 7dispatchRequest @ dispatchRequest.js:51 8_request @ Axios.js:170 9request @ Axios.js:40 10httpMethod @ Axios.js:209 11wrap @ bind.js:5 12login @ api.js:10 13（匿名） @ authActions.js:23 14（匿名） @ createAsyncThunk.ts:634 15step @ assign.js:17 16（匿名） @ assign.js:17 17（匿名） @ assign.js:17 18__async @ assign.js:17 19（匿名） @ createAsyncThunk.ts:599 20（匿名） @ createAsyncThunk.ts:684 21（匿名） @ redux-thunk.mjs:5 22dispatch @ VM656:6 23login @ authActions.js:13 24handleLogin @ LoginPage.js:31 25callCallback @ react-dom.development.js:4164 26invokeGuardedCallbackDev @ react-dom.development.js:4213 27invokeGuardedCallback @ react-dom.development.js:4277 28invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291 29executeDispatch @ react-dom.development.js:9041 30processDispatchQueueItemsInOrder @ react-dom.development.js:9073 31processDispatchQueue @ react-dom.development.js:9086 32dispatchEventsForPlugins @ react-dom.development.js:9097 33（匿名） @ react-dom.development.js:9288 34batchedUpdates$1 @ react-dom.development.js:26140 35batchedUpdates @ react-dom.development.js:3991 36dispatchEventForPluginEventSystem @ react-dom.development.js:9287 37dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 38dispatchEvent @ react-dom.development.js:6457 39dispatchDiscreteEvent @ react-dom.development.js:6430 40authActions.js:24 {error: true, exception: AxiosError}error: trueexception: AxiosError {message: 'Request failed with status code 400', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}[[Prototype]]: Object 41xhr.js:258 42 43 44 POST http://localhost:5002/api/auth/login 400 (Bad Request) 45dispatchXhrRequest @ xhr.js:258 46xhr @ xhr.js:49 47dispatchRequest @ dispatchRequest.js:51 48_request @ Axios.js:170 49request @ Axios.js:40 50httpMethod @ Axios.js:209 51wrap @ bind.js:5 52login @ api.js:10 53（匿名） @ authActions.js:29 54await in （匿名）（非同期） 55（匿名） @ createAsyncThunk.ts:634 56step @ assign.js:17 57（匿名） @ assign.js:17 58（匿名） @ assign.js:17 59__async @ assign.js:17 60（匿名） @ createAsyncThunk.ts:599 61（匿名） @ createAsyncThunk.ts:684 62（匿名） @ redux-thunk.mjs:5 63dispatch @ VM656:6 64login @ authActions.js:13 65handleLogin @ LoginPage.js:31 66callCallback @ react-dom.development.js:4164 67invokeGuardedCallbackDev @ react-dom.development.js:4213 68invokeGuardedCallback @ react-dom.development.js:4277 69invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291 70executeDispatch @ react-dom.development.js:9041 71processDispatchQueueItemsInOrder @ react-dom.development.js:9073 72processDispatchQueue @ react-dom.development.js:9086 73dispatchEventsForPlugins @ react-dom.development.js:9097 74（匿名） @ react-dom.development.js:9288 75batchedUpdates$1 @ react-dom.development.js:26140 76batchedUpdates @ react-dom.development.js:3991 77dispatchEventForPluginEventSystem @ react-dom.development.js:9287 78dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 79dispatchEvent @ react-dom.development.js:6457 80dispatchDiscreteEvent @ react-dom.development.js:6430 81xhr.js:258 82 83 84 POST http://localhost:5002/api/auth/login 400 (Bad Request) 85dispatchXhrRequest @ xhr.js:258 86xhr @ xhr.js:49 87dispatchRequest @ dispatchRequest.js:51 88_request @ Axios.js:170 89request @ Axios.js:40 90httpMethod @ Axios.js:209 91wrap @ bind.js:5 92login @ api.js:10 93（匿名） @ authActions.js:23 94（匿名） @ createAsyncThunk.ts:634 95step @ assign.js:17 96（匿名） @ assign.js:17 97（匿名） @ assign.js:17 98__async @ assign.js:17 99（匿名） @ createAsyncThunk.ts:599 100（匿名） @ createAsyncThunk.ts:684 101（匿名） @ redux-thunk.mjs:5 102dispatch @ VM656:6 103login @ authActions.js:13 104handleLogin @ LoginPage.js:34 105callCallback @ react-dom.development.js:4164 106invokeGuardedCallbackDev @ react-dom.development.js:4213 107invokeGuardedCallback @ react-dom.development.js:4277 108invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291 109executeDispatch @ react-dom.development.js:9041 110processDispatchQueueItemsInOrder @ react-dom.development.js:9073 111processDispatchQueue @ react-dom.development.js:9086 112dispatchEventsForPlugins @ react-dom.development.js:9097 113（匿名） @ react-dom.development.js:9288 114batchedUpdates$1 @ react-dom.development.js:26140 115batchedUpdates @ react-dom.development.js:3991 116dispatchEventForPluginEventSystem @ react-dom.development.js:9287 117dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 118dispatchEvent @ react-dom.development.js:6457 119dispatchDiscreteEvent @ react-dom.development.js:6430 120authActions.js:24 {error: true, exception: AxiosError} 121xhr.js:258 122 123 124 POST http://localhost:5002/api/auth/login 400 (Bad Request)
該当のソースコード
authActions.js
1import { createAsyncThunk } from '@reduxjs/toolkit'; 2import * as api from '../../api'; 3import { openAlertMessage } from './alertActions'; 4 5export const authActions = { 6 SET_USER_DETAILS: 'AUTH.SET_USER_DETAILS' 7}; 8 9export const getActions = (dispatch) => { 10 return { 11 login: (userDetails) => dispatch(login(userDetails)), 12 register: (userDetails) => dispatch(register(userDetails)), 13 }; 14}; 15 16export const login = createAsyncThunk( 17 'auth/login', 18 async (userDetails, { rejectWithValue, dispatch }) => { 19 try { 20 const response = await api.login(userDetails); 21 const { data } = response; 22 localStorage.setItem('user', JSON.stringify(data.userDetails)); 23 return data.userDetails; 24 } catch (error) { 25 dispatch(openAlertMessage(error.response?.data)); 26 return rejectWithValue(error.message); 27 } 28 } 29); 30 31export const register = createAsyncThunk( 32 'auth/register', 33 async (userDetails, { rejectWithValue, dispatch }) => { 34 try { 35 const response = await api.register(userDetails); 36 const { data } = response; 37 localStorage.setItem('user', JSON.stringify(data.userDetails)); 38 return data.userDetails; 39 } catch (error) { 40 dispatch(openAlertMessage(error.response?.data)); 41 return rejectWithValue(error.message); 42 } 43 } 44); 45 46export const setUserDetails = (userDetails) => ({ 47 type: authActions.SET_USER_DETAILS, 48 payload: userDetails, 49});
LoginPage.js
1import React, { useEffect, useState } from 'react'; 2import AuthBox from '../../shared/compoents/AuthBox'; 3import LoginPageHeader from './LoginPageHeader'; 4import LoginPageInputs from './LoginPageInputs'; 5import LoginPageFooter from './LoginPageFooter'; 6import { validateLoginForm } from '../../shared/compoents/utils/validators'; 7import { connect } from 'react-redux'; 8import { getActions } from '../../store/actions/authActions'; 9import { useNavigate } from 'react-router-dom'; 10 11const LoginPage = ({ login }) => { 12 const navigate = useNavigate(); 13 14 const [mail, setMail] = useState(''); 15 const [password, setPassword] = useState(''); 16 const [isFormValid, setIsFormValid] = useState(false); 17 18 useEffect(() => { 19 setIsFormValid(validateLoginForm({ mail, password })); 20 }, [mail, password, setIsFormValid]); 21 22 const handleLogin = async () => { 23 const userDetails = { 24 mail, 25 password, 26 }; 27 28 try { 29 await login(userDetails); 30 navigate('/dashboard'); 31 } catch (error) { 32 console.error(error); 33 } 34 }; 35 36 return ( 37 <AuthBox> 38 <LoginPageHeader /> 39 <LoginPageInputs 40 mail={mail} 41 setMail={setMail} 42 password={password} 43 setPassword={setPassword} 44 /> 45 <LoginPageFooter isFormValid={isFormValid} handleLogin={handleLogin}/> 46 </AuthBox> 47 ); 48}; 49 50const mapActionsToProps = (dispatch) => { 51 return { 52 ...getActions(dispatch), 53 }; 54}; 55 56export default connect(null, mapActionsToProps)(LoginPage); 57
試したこと・調べたこと
上記の詳細・結果
ソースコードをChatGPTで確認してもらったが解決できなかった。
補足
特になし
0 コメント