无法将React Route中的组件连接到Redux存储

问题描述

我试图将放置在Route中的组件连接到redux存储，但是没有成功。运行程序将引发错误，提示：TypeError: props.setIsLoggedIn is not a function 将商店连接到Route之外的组件（例如MenuBar）可以正常工作。

包含路由的文件的重要部分：

<ThemeProvider theme={Theme}>
          <Provider store = {store}>
            <Router>
              <div  className = {classes.pageLayout}>
                <TopBar />
                <MenuBar />
                <Switch>
                    <Route exact  path ="/" 
                                component={<Home/>}/>
                    <Route exact  path ="/home" 
                                component={<Home/>}/>
                    <Route exact path ="/login"  
                                component= {<LoginPage/>}/>
                </Switch>
            </div>
          </Router>
        </Provider>
</ThemeProvider>

LoginPage文件的重要部分：

import { connect } from "react-redux";

const setIsLoggedIn = isLoggedIn => ({
  type: "SET_IS_LOGGED_IN",isLoggedIn: isLoggedIn
});

const LoginForm = (props) => {
  props.setIsLoggedIn(true);
  return (<div>Contains some components.</div>);
}

const mapdispatchToProps = {
  setIsLoggedIn
};

export default connect(null,mapdispatchToProps)(LoginPage);

解决方法

redux connect的东西在这里很好-LoginPage将具有setIsLoggedIn道具-您不会显示LoginPage的代码，但很可能您只是不会将道具传递给LoginForm？

即

const LoginPage = (props) => (
  ...
  <LoginForm 
    setIsLoggedIn={props.setIsLoggedIn} 
    ...
  />
  ...
)