為什么會出現“ TypeError：無法讀取未定義的屬性” props”（反應路由器，React-Redux）？

Question

我首先使用以下內容“ 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)

在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')
)

而且效果很好。 但是我決定制作一個“ 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會正確更改為“主頁”，但會顯示“ HomePage.js”的以下錯誤消息：

TypeError: Cannot read property 'props' of undefined

試圖解決它，但似乎仍然忽略了這個問題。 可能是什么問題？ 任何幫助將不勝感激。 謝謝。

Answer 1

這里的問題是在您的第一個實現中， HomePage是一個容器組件。 HomePage始終呈現，並且在其內部呈現其他組件。

在后續操作中， HomePage不再是容器組件。 內部沒有其他組件。 這意味着this.props.children是undefined （它可能應該是一個空數組，但這是一個React設計決策）。

在switch條件下，由於this.props.children是undefined ，因此執行undefined.props.route.path會拋出該TypeError 。