开发者问题收集

为什么我会收到“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.childrenundefined (它可能应该是一个空数组,但这是 React 的设计决定)。

switch 条件下,由于 this.props.childrenundefined ,因此执行 undefined.props.route.path 会引发 TypeError

Ashitaka
2016-06-25