提交表單時顯示警報錯誤

Question

如果用戶提交錯誤的電子郵件和密碼，我會嘗試顯示警報，但我正在努力解決這個問題。 執行 dispatch (login(user)) 時會更新錯誤和加載狀態。 但是當用戶單擊登錄以提交表單時，不會檢查錯誤和加載並直接導航到主頁（'/'）。

這是我的登錄屏幕代碼：

import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Alert, Button, Form, Spinner } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import { login } from "../JS/Action/user";



const Login = () => {
const [User, setUser] = useState({});
const errors = useSelector((state) => state.userReducer.errors);
const loading = useSelector((state) => state.userReducer.loadUser);
const dispatch = useDispatch();
const navigate = useNavigate();


const handleChnage = (e) => {
setUser({ ...User, [e.target.name]: e.target.value });
};
const handleUser = (e) => {
e.preventDefault();
dispatch(login(User))
navigate('/')

};
return (
 <div

>
  {errors && errors.map(el=><Alert variant="danger">{el.msg}</Alert>)}
  {loading && <Spinner animation="border" variant="secondary" />}

 <Form >
 
  
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" name="email" onChange={handleChnage} />

    <Form.Label>Password</Form.Label>
    <Form.Control type="text" placeholder="Password" name="password" onChange={handleChnage} />

    <Button variant="primary" type="submit" disabled={loading} onClick={handleUser} >
      login
    </Button>
  </Form>
</div>
);
};

export default Login;

這是登錄操作：

//LOGIN USER
   export const login = (user) => async (dispatch) => {
  dispatch({ type: LOAD_USER });
  try {
    let result = await axios.post("/api/user/login", user);
    dispatch({ type: LOGIN_USER, payload: result.data });
    
  } catch (error) {
    dispatch({ type: FAIL_USER, payload: error.response.data.errors });
  }
  };

這是用戶減速器：

  //import

import {
  CLEAR_ERRORS,
  CURRENT_USER,
  FAIL_USER,
  LOAD_USER,
  LOGIN_USER,
  LOGOUT_USER,
  REGISTER_USER,
} from "../ActionTypes/user";

//initial state
const initialState = {
  user: null,
  loadUser: false,
  errors: null,
  isAuth: false,
  isAdmin: false
};

//pure function
const userReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case LOAD_USER:
      return { ...state, loadUser: true };
    case REGISTER_USER:
      localStorage.setItem("token", payload.token);
      return {
        ...state,
        user: payload.user,
        loadUser: false,
        isAuth: true,
        isAdmin: payload.user.isAdmin,
      };
    case LOGIN_USER:
      localStorage.setItem("token", payload.token);
      return {
        ...state,
        loadUser: false,
        isAuth: true,
        user: payload.user,
        isAdmin: payload.user.isAdmin,
      };
    case CURRENT_USER:
      return {
        ...state,
        loadUser: false,
        isAuth: true,
        user: payload,
        isAdmin: payload.isAdmin,
      };
    case LOGOUT_USER:
      localStorage.removeItem("token");
      return {
        user: null,
        loadUser: false,
        errors: null,
        isAuth: false,
        isAdmin: false
      };
    case FAIL_USER:
      return { ...state, errors:payload, loadUser: false };
    case CLEAR_ERRORS:
      return { ...state, errors:null };
    default:
      return state;
  }
};

//export
export default userReducer;

對不起，我的壞人希望你能明白，你可以幫助我..

Answer 1

您不必在handleUser函數中使用navigate("/") ，因為它不會檢查用戶是否登錄，而是會導航。

const handleUser = (e) => {
    e.preventDefault();
    dispatch(login(User))
    // navigate('/')
};

Instead, use useEffect hook to check whether the user is logged in or not and alert and navigate.

const user = useSelector((state) => state.userReducer.user);
const error = useSelector((state) => state.userReducer.errors);

useEffect(()=>{
    if(user){
        alert("Logged in successfully")
        navigate("/")
   }

    if(error){
        alert(error)
   }

},[navigate,user,error])

希望對您有所幫助，謝謝。