Question

我有一条通往组件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中，我试图从URL中获取param caseNumber。仅在此处显示组件中的相关部分：

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字段为{{ 1}}。在检查控制台时，我可以在函数中看到我：

NaN

我可以看到const mapMatchToParam = (match, location) => { const params = trackingConfig.isQueryParam ? parseQueryString(location.search) : match.params; return trackingConfig.parse(params[trackingConfig.paramName]); };是一个空对象。我不确定为什么会这样，为什么我会得到一个空对象？

Answer 1

在trackRouteParam HOC中，在行：

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

您尝试编辑：

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

希望可以帮助您！

反应路由器-无法从网址获取参数

1 个答案: