React+Redux请求数据报错：Uncaught (in promise) TypeError: Cannot read property 'props' of undefined

Hey Ivan, let's break down this error you're facing—it's super common when working with async actions in React and Redux, and usually boils down to incorrect this binding in your functions or callbacks. Here's how to fix it:

Common Causes & Solutions #

1. Component Methods Aren't Bound to this #

If you've defined a method in your component to trigger the data fetch, and you're calling it without binding this, the method won't have access to the component's props (including Redux-connected props like dispatch).

Example of the Problem:

class App extends React.Component {
  fetchData() {
    // `this` is undefined here!
    this.props.fetchPostsFromServer();
  }

  componentDidMount() {
    this.fetchData();
  }

  // ... rest of component
}

Fixes:

• Use arrow functions for class methods (auto-binds this):

  fetchData = () => {
    this.props.fetchPostsFromServer();
  }
  

• Bind the method in the constructor:

  constructor(props) {
    super(props);
    this.fetchData = this.fetchData.bind(this);
  }
  

• Use an arrow function when calling the method:

  componentDidMount() {
    // Wrapping in an arrow function preserves the component's `this` context
    (() => this.fetchData())();
  }
  

2. Async Callbacks Lose Context #

If you're making the API call directly in a component (instead of a Redux action creator), the promise callback might lose the component's this context if you use a regular function instead of an arrow function.

Example of the Problem:

componentDidMount() {
  fetch('/api/posts')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      // `this` is undefined here
      this.props.dispatch({ type: 'LOAD_POSTS', payload: data });
    });
}

Fix:

Swap regular functions for arrow functions in the promise chain—arrow functions inherit the parent context:

componentDidMount() {
  fetch('/api/posts')
    .then(response => response.json())
    .then(data => {
      this.props.dispatch({ type: 'LOAD_POSTS', payload: data });
    });
}

3. Double-Check Your Redux Store Setup #

While this isn't the direct cause of your props error, making sure your store is correctly configured with redux-thunk ensures async actions work as expected. Your store setup should look something like this (filling in the missing parts from your code snippet):

const logger = createLogger();
const middleware = applyMiddleware(thunk, logger);

const store = createStore(
  allReducers,
  // Add initial state here if needed
  middleware
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Quick Debug Tip #

Add a console.log(this) inside the function where the error occurs—if it logs undefined, you know the issue is a missing this binding.

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