React组件调用Redux Action报错：Cannot read property 'params' of undefined

Hey there! Let's break down why you're hitting that Cannot read property 'params' of undefined error and fix it step by step.

What's Causing the Error? #

The error means this.props.match is undefined in your componentDidMount method. This happens because your ConfiguredLocation component isn't receiving React Router's routing props (match, location, history) by default. There are two common reasons for this:

1. Your component isn't being rendered directly by a React Router <Route> component
2. If it is nested inside another component (not directly under a Route), it needs a little extra help to access those routing props

Fix 1: Ensure Your Component is Rendered via a Route #

First, double-check your routing setup. You need to render ConfiguredLocation using a <Route> component that defines the jobId param, like this:

// In your app's routing file
import { Route } from 'react-router-dom';
import ConfiguredLocation from './path/to/ConfiguredLocation';

<Route path="/jobs/:jobId/configured-locations" component={ConfiguredLocation} />

This tells React Router to inject the match prop (which contains your jobId param) into your component.

Fix 2: Use withRouter if Needed #

If your component is nested inside another component (not directly rendered by a Route), wrap it with the withRouter higher-order component to force-inject the routing props. Here's how to update your ConfiguredLocation.jsx:

1. Import withRouter from react-router-dom:

import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'; // Add this line

2. Wrap your connected component with withRouter when exporting:

// Replace your existing export line with this
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ConfiguredLocation));

Extra Safeguards to Avoid Future Errors #

Add a check to componentDidMount to handle cases where jobId might be missing, so you don't hit unexpected errors:

componentDidMount() {
  // Use optional chaining (ES2020+) to safely access nested properties
  const jobId = this.props.match?.params?.jobId;
  if (jobId) {
    this.props.retrieveLocations(jobId);
  } else {
    console.warn("No jobId found in route parameters!");
  }
}

If your environment doesn't support optional chaining, use && instead:

componentDidMount() {
  if (this.props.match && this.props.match.params && this.props.match.params.jobId) {
    this.props.retrieveLocations(this.props.match.params.jobId);
  }
}

Small Redux Best Practice Tip #

Instead of calling store.getLabels() directly in your render method, inject the labels into your component via mapStateToProps—this keeps your component aligned with Redux's unidirectional data flow:

const mapStateToProps = state =>{
  return { 
    conLocations: state.locationRed.conLocations,
    labels: state.yourLabelsReducer.labels // Replace with your actual reducer path
  };
};

Then use it in render like:

render(){
  const { conLocations, labels } = this.props;
  return(
    // ... your existing JSX, replace _labels with labels
  );
}

内容的提问来源于stack exchange，提问作者learningMonk