我使用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
感谢
https://github.com/ReactTraining/react-router/issues/4640可能有助于尝试从LIB –
导入另一个问题可能是<列表项的onClick = {this.fetchMenuItem(this.props.id )}>。它应该是:<列表项的onClick = {()=> this.fetchMenuItem(this.props.id)}> – Ved
@Ved,这不是必要的,因为我的'onClick'返回的功能。 – daydreamer