遺漏的類型錯誤：無法讀取的未定義的屬性「推」以正確的進口是可用

Question

我使用react-router和見過的其他問題問了。可能我是盲人，或者這可能是一個有效的問題。

index.js有

const Root =() => (
    <MuiThemeProvider> 
     <Router history={browserHistory}> 
      <div> 
       <Route path="/" component={App}/> 
       <Route path="/menu" component={Menu}/> 
       <Route path="/summary" component={Summary}/> 
       <Route path="/menuDetail/:id" component={MenuDetail}/> 
       <Redirect from="/" to="/summary"/> 
      </div> 
     </Router> 
    </MuiThemeProvider> 
); 

MenuDetail.js看起來像

import React from 'react'; 

const MenuDetail = ({match}) => (
    <div> 
     <h3>Menu Id: {match.params.id}</h3> 
    </div> 
); 

export default MenuDetail; 

在SpicyMenu.js我做

import { browserHistory } from 'react-router'; 
class SpicyMenuItem extends React.Component { 
    constructor(props) { 
     super(props); 

     this.fetchMenuItem = this.fetchMenuItem.bind(this); 
    } 

    fetchMenuItem(menuId) { 
     return() => { 
      console.log("fetching menu with id: " + menuId); 
      browserHistory.push('/menuDetail/' + menuId); 
     } 

    } 
    render() { 
     return (
      <ListItem onClick={this.fetchMenuItem(this.props.id)}> 
       <Grid fluid> 
        <Row center="lg" style={RowItemStyle}> 
         <Col xs={3} sm={3} lg={2}><Avatar src={this.props.image}/></Col> 
         <Col xs={6} sm={6} lg={4}>{this.props.name}</Col> 
         <Col xs={3} sm={3} lg={2}>{this.props.price}</Col> 
        </Row> 
       </Grid> 
      </ListItem> 
     ); 
    } 
} 

但是當我運行這一點，點擊一個ListItem，它給了我下面的

SpicyMenu.js:45 Uncaught TypeError: Cannot read property 'push' of undefined 
    at Object.onClick (http://localhost:3000/static/js/bundle.js:78878:45) 
    at EnhancedButton._this.handleClick (http://localhost:3000/static/js/bundle.js:42799:22) 
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17230:17) 
    at executeDispatch (http://localhost:3000/static/js/bundle.js:17013:22) 
    at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:17036:6) 
    at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16424:23) 
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16435:11) 
    at Array.forEach (native) 
    at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17333:10) 
    at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16638:8) 
    at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24260:19) 
    at Object.handleTopLevel [as _handleTopLevel] (http://localhost:3000/static/js/bundle.js:24271:6) 
    at handleTopLevelImpl (http://localhost:3000/static/js/bundle.js:29372:25) 
    at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:19844:21) 
    at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:29287:27) 
    at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:18463:28) 
    at dispatchEvent (http://localhost:3000/static/js/bundle.js:29447:21) 

的具體承諾的這種變化是https://github.com/hhimanshu/spicyveggie/commit/0532b9d7ea16d7f7f672973bedcf4109f4aa4dcf 和完整代碼，請https://github.com/hhimanshu/spicyveggie/tree/menu_detail

感謝

Answer 1

您使用的反應路由器V4和使用browserHistory它不支持了喜歡這個。您可以從您的路線組件（SpicyMenuItem）道具history，並且可以調用它push方法是這樣的。

props.history.push('/menuDetail/' + menuId); 

此外，當你定義<Router>你不需要provid browserHistory。改爲使用新的<BrowserRouter>。

Answer 2

我的Component不是Router組件，所以我不得不用withRouter API包裝它。解決方案看起來像

import {withRouter} from 'react-router'; 
class SpicyMenu extends React.Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      foodItems: foodItems 
     } 
    } 

    render() { 
     return (
      <List> 
       {this.state.foodItems.map(foodItem => <SpicyMenuItemWithRouter key={foodItem.id} {...foodItem}/>)} 
      </List> 

     ); 
    } 
} 
const SpicyMenuItemWithRouter = withRouter(SpicyMenuItem); 

修復了這個問題。感謝大家的幫助