React Redux登录表单提交时错误提示不显示且直接跳转问题

你的核心问题是登录请求还没完成就执行了跳转，navigate('/')是同步代码，不管登录成功失败都会立即执行。需要改成仅在登录成功（isAuth变为true）时才跳转。

修改步骤： #

1. 在Login组件中添加对isAuth状态的监听
   从redux中获取isAuth状态，用useEffect监听其变化，当状态变为true时跳转到首页：

   import React, { useState, useEffect } from "react"; // 新增useEffect导入
   // ... 其他导入保持不变
   
   const Login = () => {
     const [User, setUser] = useState({});
     const errors = useSelector((state) => state.userReducer.errors);
     const loading = useSelector((state) => state.userReducer.loadUser);
     const isAuth = useSelector((state) => state.userReducer.isAuth); // 新增isAuth获取
     const dispatch = useDispatch();
     const navigate = useNavigate();
   
     // 新增：监听isAuth变化，成功则跳转
     useEffect(() => {
       if (isAuth) {
         navigate('/');
       }
     }, [isAuth, navigate]);
   
     // ... handleChange函数保持不变
   
     const handleUser = (e) => {
       e.preventDefault();
       dispatch(login(User));
       // 移除这里的navigate('/')
     };
   
     // ... 返回的JSX保持不变
   };
   

2. 移除handleUser中的同步跳转代码
   删掉dispatch(login(User))之后的navigate('/')，避免不管结果都跳转。

为什么这样有效： #

• 登录成功时，你的reducer里LOGIN_USER会把isAuth设为true，此时useEffect会触发，执行跳转。
• 登录失败时，FAIL_USER只会更新errors状态，isAuth保持false，不会触发跳转，错误提示会正常显示。

额外优化建议： #

• 可以在组件卸载时清空错误，避免切换到其他页面后错误提示残留：

  useEffect(() => {
    return () => {
      dispatch({ type: CLEAR_ERRORS }); // 需要确保CLEAR_ERRORS action已定义
    };
  }, [dispatch]);
  

• 表单输入时可以实时清空错误，提升用户体验：在handleChange中添加dispatch({ type: CLEAR_ERRORS })。

内容的提问来源于stack exchange，提问作者Mohamed Aziz Laroussi