ReactJS中使用React-Redux映射状态到Props失败问题求助

嘿，我来帮你排查这个React-Redux connect映射状态失败的问题——看起来你在写PrivateRoute（路由守卫）的时候遇到了麻烦，结合你的代码片段，我整理了几个关键的排查点和修复方案：

1. 补全connect的核心：mapStateToProps函数 #

你当前的代码里只调用了connect()，但没有传入mapStateToProps这个关键函数——这是连接Redux store和组件props的桥梁，没有它，组件根本拿不到store里的userLoginStatus状态，自然会报错。

你需要根据自己的Redux store结构，定义这个函数，把需要的状态映射到组件props里：

// 假设你的store中，登录状态存在state.auth.userLoginStatus下（根据你的实际结构调整）
const mapStateToProps = (state) => {
  return {
    userLoginStatus: state.auth.userLoginStatus
  };
};

然后把这个函数传给connect，再导出组件：

export default connect(mapStateToProps)(PrivateRoute);

2. 修正代码里的语法错误 #

你的代码里<Component {...props} /...明显是未完成的语法错误，必须改成<Component {...props} />——这种小错误也会导致组件渲染失败，很容易被误认为是mapStateToProps的问题。

3. 确认store状态路径的正确性 #

一定要检查你的Redux store结构，确保userLoginStatus的路径和mapStateToProps里写的一致：

• 如果你的登录状态直接存在根state下，那就是state.userLoginStatus
• 如果是放在auth reducer里，就是state.auth.userLoginStatus
• 可以用Redux DevTools查看store的结构，确认状态的位置是否正确。

4. 检查路由逻辑是否符合需求 #

看你当前的逻辑：props.userLoginStatus==1 ? <Redirect to='/home' /> : <Component {...props} />，这看起来是已登录就跳转到home，未登录才渲染目标组件——这和常规的PrivateRoute逻辑刚好相反（常规是已登录渲染组件，未登录跳登录页）。如果逻辑反了，记得调整：

userLoginStatus === 1 ? <Component {...props} /> : <Redirect to='/login' />

完整的修正后代码示例 #

import React from 'react'; 
import { connect } from 'react-redux'; 
import { Redirect, Route } from 'react-router-dom'; 

const PrivateRoute = ({ component: Component, userLoginStatus, ...rest }) => ( 
  <Route {...rest} render={(props) => ( 
    // 根据你的实际需求调整逻辑，这里是已登录渲染组件，未登录跳登录页
    userLoginStatus === 1 ? <Component {...props} /> : <Redirect to='/login' />
  )} />
);

// 适配你的store结构，修改状态路径
const mapStateToProps = (state) => {
  return {
    userLoginStatus: state.auth.userLoginStatus
  };
};

export default connect(mapStateToProps)(PrivateRoute);

额外排查点 #

别忘了确保你的整个应用已经被Provider组件包裹，这样connect才能正确获取到Redux store：

import { Provider } from 'react-redux';
import store from './store'; // 你的Redux store实例

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

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