求助：mapStateToProps为何无法更新组件的props？

嘿，我一眼就揪出你遇到的问题根源啦！

核心问题：Redux状态的命名空间匹配错误 #

你在配置Store时用了combineReducers，把loginReducer挂载到了login这个命名空间下：

combineReducers({
  login: loginReducer,
  message: messageReducer
})

这意味着你的Redux根状态结构是这样的：

{
  login: {
    username: "...",
    password: "...",
    loggedIn: true/false
  },
  message: { /* 消息相关状态 */ }
}

但你的mapStateToProps却直接从根state里取字段：

// 错误写法
const mapStateToProps = state => {
  return {
    username: state.username, // 根state里根本没有这个字段！
    password: state.password,
    loggedIn: state.loggedIn
  }
}

自然拿不到正确的值，所以这些props才会是undefined。

修复方案：修正mapStateToProps的取值路径 #

把mapStateToProps改成从state.login里读取状态就可以了：

const mapStateToProps = state => {
  return {
    username: state.login.username,
    password: state.login.password,
    loggedIn: state.login.loggedIn
  }
}

额外的优化小建议 #

1. 改用受控组件处理表单：
   你现在用ref获取输入值的方式不是React推荐的最佳实践，更合适的是用useState管理表单状态，同时别忘了阻止表单默认提交行为：

   import React, { useState } from 'react'
   const Login = (props) => {
     const [username, setUsername] = useState('')
     const [password, setPassword] = useState('')
   
     const login = (e) => {
       e.preventDefault() // 阻止页面刷新，避免Redux状态丢失
       props.login(username, password)
     }
   
     return(
       <div>
         <h1>Login</h1>
         <form onSubmit={login}>
           <label>
             Username:
             <input 
               type="text" 
               className="form-control col-md-12" 
               value={username}
               onChange={(e) => setUsername(e.target.value)}
             />
           </label>
           <label>
             Password:
             <input 
               type="password" 
               className="form-control col-md-12" 
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />
           </label>
           <br />
           <input type="submit" value="Submit" />
         </form>
       </div>
     )
   }
   

2. 不要在Redux里存储密码：
   把密码存在Redux状态里是非常不安全的，登录验证完成后应该立即丢弃密码，只保留用户名、登录状态这类必要信息就好。

3. 优化登录跳转时机：
   你现在调用props.login后立刻跳转，可能Redux状态还没更新完成。可以用useEffect监听loggedIn的变化，状态生效后再跳转：

   import { useEffect } from 'react'
   
   // 在Login组件内添加
   useEffect(() => {
     if (props.loggedIn) {
       props.history.push("/home")
     }
   }, [props.loggedIn, props.history])
   

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