React router - не получает параметр из url

У меня есть путь к компоненту HandlingIndex:

<Route strict path = {handlingCasePath} component = {HandlingIndex} />

HandlingIndex обернут компонентом trackRouteParam. Компонент trackRouteParam выглядит так:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { parseQueryString } from '../../utils/urlUtils';

const defaultConfig = {
  paramName: '',
  parse: a => a,
  paramPropType: PropTypes.any,
  storeParam: () => undefined,
  getParamFromStore: () => undefined,
  isQueryParam: false,
  paramsAreEqual: (paramFromUrl, paramFromStore) => paramFromUrl === paramFromStore
};

/**
 * trackRouteParam
 *
 * Higher order component that tracks a route parameter and stores in the application
 * state whenever it changes.
 * @param config
 */
const trackRouteParam = config => (WrappedComponent) => {
  class RouteParamTrackerImpl extends Component {
    constructor() {
      super();
      this.updateParam = this.updateParam.bind(this);
    }

    componentDidMount() {
      this.updateParam();
    }

    componentDidUpdate(prevProps) {
      this.updateParam(prevProps.paramFromUrl);
    }

    componentWillUnmount() {
      const { storeParam } = this.props;
      storeParam(undefined);
    }

    updateParam(prevParamFromUrl) {
      const { paramFromUrl, storeParam, paramsAreEqual } = this.props;
      if (!paramsAreEqual(paramFromUrl, prevParamFromUrl)) {
        storeParam(paramFromUrl);
      }
    }

    render() {
      const {
        paramFromUrl,
        paramFromStore,
        storeParam,
        paramsAreEqual,
        ...otherProps
      } = this.props;
      return <WrappedComponent {...otherProps} />;
    }
  }

  const trackingConfig = { ...defaultConfig, ...config };

  RouteParamTrackerImpl.propTypes = {
    paramFromUrl: trackingConfig.paramPropType,
    paramFromStore: trackingConfig.paramPropType,
    storeParam: PropTypes.func.isRequired,
    paramsAreEqual: PropTypes.func.isRequired
  };

  RouteParamTrackerImpl.defaultProps = {
    paramFromUrl: undefined,
    paramFromStore: undefined
  };

  const mapStateToProps = state => ({ paramFromStore: trackingConfig.getParamFromStore(state) });
  const mapDispatchToProps = dispatch => bindActionCreators({ storeParam: trackingConfig.storeParam }, dispatch);
  const mapMatchToParam = (match, location) => {
    const params = trackingConfig.isQueryParam ? parseQueryString(location.search) : match.params;
    return trackingConfig.parse(params[trackingConfig.paramName]);
  };
  const mergeProps = (stateProps, dispatchProps, ownProps) => ({
    ...ownProps,
    ...stateProps,
    ...dispatchProps,
    paramFromUrl: mapMatchToParam(ownProps.match, ownProps.location),
    paramsAreEqual: trackingConfig.paramsAreEqual
  });

  const RouteParamTracker = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(RouteParamTrackerImpl));

  RouteParamTracker.WrappedComponent = WrappedComponent;
  Object.keys(RouteParamTracker).forEach((ownPropKey) => {
    RouteParamTracker[ownPropKey] = WrappedComponent[ownPropKey];
  });

  return RouteParamTracker;
};

export default trackRouteParam;

В компоненте HandlingIndex я пытаюсь получить paramcaseNumber по URL-адресу. Здесь просто показаны соответствующие части компонента:

const mapStateToProps = state => ({
  selectedCaseNumber: getSelectedCaseNumber(state)
});

export default trackRouteParam({
  paramName: 'caseNumber',
  parse: caseNumberFromUrl => Number.parseInt(caseNumberFromUrl , 10),
  paramPropType: PropTypes.number,
  storeParam: setSelectedCaseNumber,
  getParamFromStore: getSelectedCaseNumber
})(connect(mapStateToProps)(requireProps(['selectedCaseNumber'])(HandlingIndex)));

Создатель действий для setSelectedCaseNumber:

export const setSelectedCaseNumber= caseNumber=> ({
  type: SET_SELECTED_CASE_NUMBER,
  data: caseNumber
});

Итак, когда я иду по маршруту 'case/1234', где параметр - caseNumber: 1234, где я устанавливаю selectedCaseNumber, я вижу, что поле data - это NaN. Осмотрев консоль, я вижу, что я в функции:

const mapMatchToParam = (match, location) => {
    const params = trackingConfig.isQueryParam ? parseQueryString(location.search) : match.params;
    return trackingConfig.parse(params[trackingConfig.paramName]);
  };

Я вижу, что match.params - пустой объект. Я не уверен, почему это так, почему я получаю пустой объект?

Вы пробовали поменять местами ваши connect и requireProps?

Colin Ricardo 19.09.2018 16:32

Потом выдает ошибку: Uncaught TypeError: Cannot call a class as a function

Leff 19.09.2018 16:45

Не уверен, почему это могло произойти, вы сделали: requireProps(['selectedCaseNumber'])(connect(MapStateToProps‌​)(HandlingIndex))?

Colin Ricardo 24.09.2018 20:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
75
1

Ответы 1

В trackRouteParam HOC, В строке:

const RouteParamTracker = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(RouteParamTrackerImpl));

Вы пытаетесь отредактировать:

const RouteParamTracker = connect(mapStateToProps, mapDispatchToProps, mergeProps)(withRouter(RouteParamTrackerImpl));

Надеюсь помочь вам!

К сожалению, я получаю то же самое.

Leff 19.09.2018 16:58

Другие вопросы по теме