React与Redux中用户登录状态无法更新的问题求助

核心问题点 #

1. setUsers reducer的map逻辑错误
   在setUsers的map回调中，仅当用户id匹配时返回新对象，未匹配的情况没有返回原用户对象，导致数组中出现undefined，破坏了Redux状态的结构，后续状态更新会异常。

2. dispatch后立即读取旧状态
   Redux的状态更新是异步的，你在dispatch(setLoginStatus)后立刻console.log(users)，拿到的还是更新前的旧状态，并非状态没更新，只是时机不对。

3. 用户数据缺少id字段
   你描述的初始用户数据没有id属性，但所有reducer都是通过user.id来匹配用户的，这会导致无法找到目标用户，自然无法更新login状态。

分步修复 #

1. 修复setUsers reducer #

补全map回调中未匹配时的返回值：

setUsers(state, action) {
  const [id, newInfo] = action.payload;
  console.log(newInfo);
  return state.map((user) => {
    if (user.id === id) {
      return { ...user, ...newInfo };
    }
    // 必须返回原用户，避免数组出现undefined
    return user;
  });
}

2. 确保用户数据包含唯一id #

无论是初始状态还是添加新用户，都要给每个用户分配唯一id：

• 修改初始状态：

initialState: [
  { id: 'user_1', name: 'haney', age: 30, login: false },
  { id: 'user_2', name: 'billi', age: 30, login: false }
],

• 修改addUsers reducer，给新用户添加id：

addUsers(state, action) {
  // 用时间戳生成临时唯一id，生产环境建议用uuid库
  const newUser = {
    ...action.payload,
    id: `user_${Date.now()}`,
    login: action.payload.login ?? false // 确保login字段存在
  };
  return [...state, newUser];
}

3. 正确查看更新后的状态 #

不要在dispatch后立刻log旧状态，改用useEffect监听状态变化：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const Login = () => {
  const dispatch = useDispatch(); // 变量名规范为小写开头
  const users = useSelector((state) => state.users);

  // 监听users状态变化，打印最新值
  useEffect(() => {
    console.log('最新用户状态:', users);
  }, [users]);

  const loginCheck = () => {
    const user = users.find((user) => user.id === formdata.id);

    if (user) {
      if (user.password === formdata.password) {
        dispatch(setLoginStatus({ userId: user.id, loginStatus: true }));
        alert(`${user.name}, hello!`);
        movePage("/nav/home");
      } else {
        alert("密码错误");
      }
    } else {
      alert("用户不存在");
    }
  };

  // ... 其他组件代码
};

4. 验证setLoginStatus逻辑 #

你的setLoginStatus reducer逻辑是正确的，只要用户存在id且匹配，就能正确更新login状态，修复上述问题后即可正常工作。

内容的提问来源于stack exchange，提问作者손하은