React Redux登录功能报错：mapStateToProps无法获取state.user_name

这个错误的核心问题出在你的Redux reducer里的状态更新逻辑，导致state的结构被破坏，进而在mapStateToProps中无法正确读取user_name属性。让我一步步帮你排查和修复：

问题1：SIGN_UP动作的状态更新写法完全错误 #

你的reducer中SIGN_UP分支的代码存在两个严重问题：

case 'SIGN_UP':
 return {first_name: state.first_name = action.payload.first_name}
 {last_name: state.last_name = action.payload.last_name}
 {user_name: state.user_name = action.payload.user_name}
 {password: state.password = action.payload.password}

• 直接修改原state对象（state.first_name = ...），违反了Redux状态不可变的核心原则，Redux要求必须返回一个全新的状态对象，不能修改原state。
• 拆分多个对象返回的写法无效，实际上只有第一个{first_name: ...}被返回，后续字段全部丢失，导致state结构被破坏。

问题2：LOG_IN动作返回了字符串而非状态对象 #

LOG_IN分支的代码直接把返回值转成了字符串：

case 'LOG_IN':
 return JSON.stringify(action.payload);

这会让整个Redux state变成一个字符串！当mapStateToProps尝试访问state.user_name时，字符串没有这个属性，自然就抛出了undefined is not an object的错误。

修复后的完整Reducer代码 #

const initialState = {
 first_name:"",
 last_name: "",
 user_name: "",
 password: "",
}

const reducer = (state = initialState, action) =>{
 switch (action.type) {
 case 'SIGN_UP':
   // 展开原state，只更新需要修改的字段，保证状态不可变
   return {
     ...state,
     first_name: action.payload.first_name,
     last_name: action.payload.last_name,
     user_name: action.payload.user_name,
     password: action.payload.password
   };
 case 'LOG_IN':
   // 根据登录返回的payload，提取需要的字段更新state，返回对象而非字符串
   return {
     ...state,
     user_name: action.payload.user_name, // 假设payload包含user_name字段
     // 可根据需求添加其他需要更新的字段
   };
 default:
   // 必须保留default分支，返回原state，处理未匹配的动作
   return state;
 }
}

额外优化建议 #

• 给initialState添加const声明，避免意外被修改
• 登录成功后，建议只提取res中需要的用户信息存入state，不要存储整个响应对象，减少不必要的数据冗余

这样修改后，Redux的state会始终保持正确的对象结构，mapStateToProps就能正常读取state.user_name及其他字段了。

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