React应用开发中遇到未处理拒绝(Type Error)：无法读取undefined的'data'属性问题求助

Hey there, let's break down this error and get it fixed for you.

Why this error happens #

The core issue here is that you're trying to access e.response.data, but e.response is actually undefined. This usually occurs when your request never makes it to the server, or fails before the server sends a response. Common scenarios include:

• A network outage (like the user losing internet)
• CORS cross-origin errors
• Request timeouts
• The server crashing entirely without sending any response back

In these cases, your HTTP library (most likely Axios, since this pattern is super common) won't include a response property in the error object. Trying to read data from an undefined response naturally throws that TypeError.

How to fix it #

You need to add a check for e.response before accessing its properties, and handle different error scenarios appropriately. Here are a few approaches:

1. Basic safe access (quick fix) #

Modify your error handling code to first check if e.response exists:

else {
  // Fall back to a generic message if response doesn't exist
  const errorDetails = e.response 
    ? e.response.data.errors[0] 
    : 'Request failed: Could not connect to the server or a network error occurred';
  
  history.push({ 
    pathname: "/fullpage-error", 
    state: { details: errorDetails } 
  });
}

2. Granular error handling #

If you want to distinguish between different error types (network issues, server errors, etc.), you can expand the logic:

else {
  let errorDetails;
  if (e.response) {
    // Server sent a response (non-2xx status code)
    errorDetails = e.response.data.errors[0];
  } else if (e.request) {
    // Request was sent but no response was received (network/timeout issue)
    errorDetails = 'Request timed out or network connection failed. Please check your internet and try again.';
  } else {
    // Error occurred while setting up the request (e.g., invalid config)
    errorDetails = `Request error: ${e.message}`;
  }

  history.push({ 
    pathname: "/fullpage-error", 
    state: { details: errorDetails } 
  });
}

3. Global function optimization #

Since this is a global API function, make sure you're properly catching all errors to avoid unhandled rejections. If your function uses async/await, wrap the logic in a try/catch block:

async function globalAPIFunction() {
  try {
    // Your API request logic here
    const response = await axios.get('/your-api-endpoint');
    // Handle successful response
  } catch (e) {
    let errorDetails;
    if (e.response) {
      errorDetails = e.response.data.errors[0];
    } else if (e.request) {
      errorDetails = 'Network connection failed. Please check your internet.';
    } else {
      errorDetails = `Request error: ${e.message}`;
    }
    history.push({ 
      pathname: "/fullpage-error", 
      state: { details: errorDetails } 
    });
  }
}
export default globalAPIFunction;

This way, you cover every possible error case and won't run into that annoying "Cannot read property 'data' of undefined" error again.

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