为什么我得到'TypeError: Cannot read property 'props'未定

Why am I getting 'TypeError: Cannot read property 'props' of undefined' (react-router, React-Redux)?

本文关键字:read property props 未定 Cannot 为什么 TypeError      更新时间:2023-09-26

我一开始是这样做的,' 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.childrenundefined(它可能应该是一个空数组,但这是一个React设计决策)。

switch条件下,由于this.props.childrenundefined,执行undefined.props.route.path会抛出TypeError