react踩坑总结--mapStateToProps无法拿到store数据

最新推荐文章于 2025-06-01 09:07:33 发布

原创最新推荐文章于 2025-06-01 09:07:33 发布 · 7.4k 阅读

0 ·

CC 4.0 BY-SA版权

踩坑系列同时被 2 个专栏收录

19 篇文章

订阅专栏

react

13 篇文章

订阅专栏

在React应用中，遇到使用mapStateToProps无法获取到store数据的问题。通过创建store并使用Provider包裹组件后，发现即使使用connect装饰组件也无法从props中直接获取store数据。解决方法是意识到connect返回的是新组件，需将其替换原有组件，从而正确获取store中的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const initialState = {
    user:
        {
            useName: '123',
            passWord: ''
        }
}

const userReducer = function(state=initialState, action) {
    return state;
}

let store = createStore(userReducer);

ReactDOM.render(
    <Provider store={store}>
    <HashRouter   history={history}>
        <div className={universal.content} >
            <Route exact path="/" component={StartPage} key={location.key}/>
            <div className={universal.rowStart+" "+universal.content}>
             <LeftNavigation ></LeftNavigation>
             <div  className={universal.leftContent}>
            <Route path="/SysPage" component={SysPage}/>
            <Route path="/JsPage" component={JsPage}/>
            <Route path="/ShowPage" component={ShowPage}/>
            <Route path="/MainPage" component={MainPage}/>
            <Route path="/ProPage" component={ProPage}/>
            <Route path="/RegisteredPage" component={RegisteredPage}/>
            <Route path="/LoginPage" component={LoginPage}/>
                </div>
            </div>
        </div>
    </HashRouter >
    </Provider>
        ,

    document.getElementById("app")
)

const  mapStateToProps = (state) => {
    console.log(state)
    return {
        useName: state.user.useName
    }
}

connect(mapStateToProps)(LoginPages);

经过上面几步创建好store后用Provider将所有组件包起来后，用connect连接后，依旧无法从props中拿到store的值，
解决
connect是返回一个新的组件，而不是改变你原来的组件，所有需要将新生成的组件抛出去，

const LoginPage= connect(mapStateToProps)(LoginPages);

export default LoginPage

这样就可以拿到数据了