我是一名redux初学者,并坚持通过redux道具来路由渲染问题。
×
TypeError: Cannot read property 'quantity' of undefined
PageLayout._this.render
src/components/controls/PageLayoutRoute/PageLayoutRoute.js:135
132 | to: routes.checkout,
133 | withArrow: true,
134 | bold: true,
> 135 | disabled: (this.props.nonFrameDisplay.quantity == 0 && this.props.frameDisplay.quantity == 0) ? true : false
136 | };
137 | }
138 |
PageLayoutRoute看起来像这样。
const PageLayoutRoute = ({component: Component, ...rest }) => {
return (
<Route
{...rest}
render={props =>
<PageLayout {...props}>
<Component />
</PageLayout>}
/>
)
};
PageLayoutRoute.propTypes = {
component: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
nonFrameDisplay: state.app.nonFrameDisplay,
frameDisplay: state.app.frameDisplay,
});
const mapDispatchToProps = {
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageLayoutRoute));
PageLayout组件包含在PageLayoutRout中。看起来像这样。
class PageLayout extends React.Component {
static propTypes = {
children: PropTypes.node.isRequired,
hideTopNav: PropTypes.bool,
hideBottomNav: PropTypes.bool,
...bottomNavProps
};
static defaultProps = {
hideTopNav: false,
hideBottomNav: false
};
如何使用react-router-dom通过Route渲染从redux store传递nonFrameDisplay,FrameDisplay道具?提前谢谢!
答案 0 :(得分:1)
写作时
PageLayoutRoute
将<Route
{...rest}
连接到Store后收到的道具将通过
const PageLayoutRoute = ({component: Component, nonFrameDisplay, frameDisplay, ...rest }) => {
return (
<Route
{...rest}
render={props =>
<PageLayout
{...props}
nonFrameDisplay={nonFrameDisplay}
frameDisplay={frameDisplay}
>
<Component />
</PageLayout>}
/>
)
};
PageLayoutRoute.propTypes = {
component: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
nonFrameDisplay: state.app.nonFrameDisplay,
frameDisplay: state.app.frameDisplay,
});
const mapDispatchToProps = {
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PageLayoutRoute));
但是这些不会传递到Route,
呈现的Component上您需要执行类似
的操作 MySurfaceView mySurfaceView = new MySurfaceView();