[英]Why am I getting 'TypeError: Cannot read property 'props' of undefined' (react-router, React-Redux)?
I first started working on this with the following, 'HomePage.js' as the only smart component: 我首先使用以下内容“ HomePage.js”作为唯一的智能组件来开始工作:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import actions from '../redux/actions'
import AppFloatBar from './AppFloatBar'
import MainCoverPhoto from './MainCoverPhoto'
import FirstPage from '../pages/FirstPage'
import { deepOrange500, grey400 } from 'material-ui/styles/colors'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme'
const muiTheme = getMuiTheme(
darkBaseTheme,
{
palette: {
accent1Color: deepOrange500,
textColor: grey400,
textColor2: grey400,
},
appBar:{
height: 67,
color:'black',
textColor:'#A0A0A0',
},
}
);
class HomePage extends Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<AppFloatBar
actions={this.props.actions}
floatBar={this.props.floatBar}
/>
<MainCoverPhoto/>
<div className="thread_body">
{(() => {
switch (this.props.children.props.route.path) {
case 'Page 1':
return <FirstPage addTodo={this.props.actions.addTodo} actions={this.props.actions}
todos={this.props.todos}
inputTexts={this.props.inputTexts}
/>
case 'Page 2':
return this.props.children
case 'Page 3':
return this.props.children
default:
return this.props.children
}
})()}
</div>
</div>
</MuiThemeProvider>
);
}
}
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(HomePage)
With the following react-router, in client.js: 在client.js中,使用以下react-router:
render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
path="/"
component={HomePage}
>
<IndexRoute
component={MainCard}
/>
<Route
component={FirstPage}
path="Page 1"
/>
<Route
component={SecondPage}
path="Page 2"
/>
<Route
component={ThirdPage}
path="Page 3"
/>
<Route
component={ThreadPage}
path="/discussion/:id"
/>
<Route
component={StaticPage}
path="Static"
/>
</Route>
</Router>
</Provider>
</div>,
document.getElementById('app')
)
And it worked fine. 而且效果很好。 But I decided to make a 'MainPage' which is what I would like the website to start off with now.
但是我决定制作一个“ MainPage”,这是我现在希望网站开始的内容。 I would like to start off with 'MainPage' and when a button is clicked on, go to the 'HomePage' So I revised the react-router in client.js:
我想从“ MainPage”开始,然后单击一个按钮,然后转到“ HomePage”,所以我修改了client.js中的react-router:
render(
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route
component={MainPage}
path="/"
/>
<Route
component={HomePage}
path="Home"
/>
</Router>
</Provider>
</div>,
document.getElementById('app')
)
With the following in 'MainPage.js': 在“ MainPage.js”中包含以下内容:
render(){
return(
<MuiThemeProvider muiTheme={muiTheme}>
<div>
<RaisedButton
containerElement={<Link to={`Home`}/>}
label="Sign In"
labelColor='#88898C'
labelStyle={{textTransform:'intial'}}
style={styles.signIn}
/>
</div>
</MuiThemeProvider>
)
}
}
function mapStateToProps(state) {
return state
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapStateToProps, mapDispatchToProps
)(MainPage)
Now when the button in 'MainPage.js' is clicked on, the link/URL changes to 'Home' correctly, but shows up the following error message for 'HomePage.js': 现在,当单击“ MainPage.js”中的按钮时,链接/ URL会正确更改为“主页”,但会显示“ HomePage.js”的以下错误消息:
TypeError: Cannot read property 'props' of undefined
Trying to resolve it but seem to continue to overlook the issue. 试图解决它,但似乎仍然忽略了这个问题。 What may be the issue?
可能是什么问题? Any help would be greatly appreciate it.
任何帮助将不胜感激。 Thank you.
谢谢。
The issue here is that in your first implementation, HomePage
is a container component. 这里的问题是在您的第一个实现中,
HomePage
是一个容器组件。 HomePage
is always rendered and inside of it other components are rendered. HomePage
始终呈现,并且在其内部呈现其他组件。
In your follow-up, HomePage
is no longer a container component. 在后续操作中,
HomePage
不再是容器组件。 No other components are rendered inside of it. 内部没有其他组件。 This means that
this.props.children
is undefined
(it probably should be an empty array, but that's a React design decision). 这意味着
this.props.children
是undefined
(它可能应该是一个空数组,但这是一个React设计决策)。
In the switch
condition, since this.props.children
is undefined
, doing undefined.props.route.path
throws that TypeError
. 在
switch
条件下,由于this.props.children
是undefined
,因此执行undefined.props.route.path
会抛出该TypeError
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.