Как передать реквизиты магазина redux через рендеринг маршрута с помощью response-router?

Я новичок в сокращении и застрял в передаче реквизитов 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
  };

Как я могу передать реквизиты nonFrameDisplay, FrameDisplay из хранилища redux через рендеринг маршрута с помощью response-router-dom? Заранее спасибо!


reactjs redux react-redux react-router-dom react-router-v4
person Seunghun Sunmoon Lee    schedule 29.11.2017    source источник
comment
где твой reducers   -  person Aaqib    schedule 29.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Когда ты пишешь

const PageLayoutRoute = ({component: Component, ...rest }) => {
  return (
  <Route
    {...rest}
    render={props =>
      <PageLayout {...props}>
        <Component />
      </PageLayout>}
  />
  )
};

Свойства, полученные после подключения PageLayoutRoute к Store, передаются компоненту Route с помощью

<Route
    {...rest}

однако они не передаются в Компонент, отображаемый Route,

Вам нужно сделать что-то вроде

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));
person Shubham Khatri    schedule 29.11.2017