React项目中Redux无法正常存储用户登录信息问题求助

问题根因 #

你的Redux不更新主要是三个核心逻辑错误导致：

1. 命名冲突：Login组件内自定义了同名的login异步请求函数，覆盖了从userSlice导入的Redux login action creator，dispatch时传入的是普通请求函数，不是Redux能识别的action对象，自然不会触发store更新。
2. 异步时序问题：React的setState是异步更新的，你在axios请求回调里设置的本地状态不会立即生效，handleSubmit执行时读取到的LoginStatus、email等值都是更新前的初始空值。
3. 触发逻辑错位：你同时给登录按钮绑定了onClick触发请求、给表单绑定了onSubmit触发dispatch，请求是异步的，dispatch执行时接口还没返回，根本拿不到有效用户数据。

修正方案 #

按如下步骤调整login_component.js即可解决问题：

1. 重命名导入的Redux login action避免命名冲突
2. 将dispatch逻辑移到axios请求的成功回调中，直接用接口返回的用户数据更新Redux，无需用本地state中转
3. 整合登录逻辑到表单提交事件，去掉按钮的onClick绑定，避免重复触发

//import "bootstrap/dist/css/bootstrap.min.css";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { useDispatch } from "react-redux";
// 重命名Redux的login action，避免和本地函数冲突
import { login as loginAction } from "../features/userSlice";

function Login() {
  const [LoginID, setLoginID] = useState("");
  const [Password, setPassword] = useState("");
  const [LoginStatus, setLoginStatus] = useState("");

  axios.defaults.withCredentials = true;
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接在表单提交逻辑中发送登录请求
    axios
      .post("http://localhost:8000/login", {
        LoginID: LoginID,
        Password: Password,
      })
      .then((response) => {
        if (response.data.message) {
          setLoginStatus(response.data.message);
        } else {
          const userData = response.data.result[0];
          setLoginStatus(userData.UserFullName);
          // 拿到用户数据后直接更新Redux
          dispatch(
            loginAction({
              name: userData.UserFullName,
              LoginId: userData.LoginID,
              email: userData.UserEmailID,
              id: userData.UserID,
              loggedIn: true,
            })
          );
        }
      });
  };

  useEffect(() => {
    axios.get("http://localhost:8000/login").then((response) => {
      if (response.data.loggedIn === true) {
        const userData = response.data.user[0];
        setLoginStatus(userData.UserFullName);
        // 页面刷新时如果已有登录态，同步更新Redux
        dispatch(
          loginAction({
            name: userData.UserFullName,
            LoginId: userData.LoginID,
            email: userData.UserEmailID,
            id: userData.UserID,
            loggedIn: true,
          })
        );
      }
    });
  }, [dispatch]);

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form onSubmit={handleSubmit}>
            <h3>Log In</h3>

            <div className="form-group ">
              <label>Login ID</label>
              <input
                type="text"
                className="form-control"
                placeholder="Login ID"
                onChange={(e) => {
                  setLoginID(e.target.value);
                }}
              />
            </div>

            <div className="form-group">
              <label>Password</label>
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                onChange={(e) => {
                  setPassword(e.target.value);
                }}
              />
            </div>

            <button type="submit" className="btn btn-primary btn-block">
              Login
            </button>
          </form>
          <h1>{LoginStatus}</h1>
        </div>
      </div>
    </div>
  );
}

export default Login;

内容的提问来源于stack exchange，提问作者Chirag Maurya