为什么我会收到“TypeError:无法读取未定义的属性‘props’”(react-router,React-Redux)?
2016-06-24
991
我首先使用以下内容开始此工作,其中“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)
使用以下 react-router,在 client.js 中:
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')
)
并且它运行良好。但我决定制作一个“MainPage”,这是我现在希望网站开始使用的内容。我想从“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')
)
在“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)
现在,当单击“MainPage.js”中的按钮时,链接/URL 会正确更改为“Home”,但会显示“HomePage.js”的以下错误消息:
TypeError: Cannot read property 'props' of undefined
试图解决它,但似乎继续忽略了这个问题。可能是什么问题?任何帮助都将不胜感激。谢谢。
1个回答
这里的问题是,在您的第一个实现中,
HomePage
是一个容器组件。
HomePage
始终被呈现,并且其中的其他组件也会被呈现。
在您的后续操作中,
HomePage
不再是容器组件。其中没有其他组件被呈现。这意味着
this.props.children
是
undefined
(它可能应该是一个空数组,但这是 React 的设计决定)。
在
switch
条件下,由于
this.props.children
是
undefined
,因此执行
undefined.props.route.path
会引发
TypeError
。
Ashitaka
2016-06-25