为什么我得到'TypeError: Cannot read property 'props'未定
Why am I getting 'TypeError: Cannot read property 'props' of undefined' (react-router, React-Redux)?
我一开始是这样做的,' home .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"开始,当一个按钮被点击时,转到"主页",所以我修改了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
试图解决它,但似乎继续忽视这个问题。有什么问题吗?任何帮助都将非常感激。谢谢你。
这里的问题是,在您的第一个实现中,HomePage
是一个容器组件。HomePage
总是被渲染,在它里面的其他组件被渲染。
在您的后续操作中,HomePage
不再是容器组件。没有其他组件在其中呈现。这意味着this.props.children
是undefined
(它可能应该是一个空数组,但这是一个React设计决策)。
在switch
条件下,由于this.props.children
是undefined
,执行undefined.props.route.path
会抛出TypeError
。
相关文章:
- 未捕获TypeError: Cannot read property 'geocode'未定义的'
- SailsJs中的错误.TypeError: Cannot read property '的定义
- 未捕获的TypeError: Cannot read property 'top'的定义
- 未捕获的TypeError: Cannot read property '未定义的数据表
- 未捕获的TypeError: Cannot read property 'timing'的定义
- 未捕获的TypeError: Cannot read property 'checked'零
- 未捕获的TypeError: Cannot read property 'top'在引导中单击导航栏时未
- Extjs5 treepanel [Uncaught TypeError: Cannot read property &
- TypeError: Cannot read property 'submit'添加到购物车'
- 添加自定义jquery.验证方法导致Uncaught TypeError: Cannot read property &
- Vue 2和Vue- resource [Cannot read property 'get'未定义的(
- asp:textbox Uncaught TypeError: Cannot read property 'va
- TypeError: Cannot read property 'search' of undefine
- 读取json时出错未捕获类型错误:Cannot read property 'output'的定义
- 未捕获的TypeError: Cannot read property 'current'在选择任何选项
- 未捕获的TypeError: Cannot read property '3'的定义
- jquery-ui.js:12443未捕获的TypeError: Cannot read property 'a
- jquery Uncaught TypeError: Cannot read property 'left
- 未捕获类型错误:Cannot read property 'print'的定义
- TokenInput + Uncaught TypeError: Cannot read property 't