React使用Fetch API调用自定义JSON时出现Cannot read property 'map' of undefined错误

Hey there! Let's break down why you're running into this error when switching to your own JSON file, and how to fix it:

1. Your new JSON structure doesn't match the tutorial's #

Chances are the JSON from the tutorial returned a direct array (like [{"id":1, "name":"Item"}, ...]), but your custom JSON might wrap the array inside an object (e.g., {"items": [{"id":1, "name":"Item"}]}) or use a different key.

When you try to call map() on the response directly, you're actually trying to map over an object (or a missing key), which results in undefined.

Fix:
First, log the fetched data to inspect its structure:

fetch('/your-custom.json')
  .then(res => res.json())
  .then(data => {
    console.log('Fetched data:', data); // Check this output in your browser's console
    this.setState({ data });
  })

If your array lives under a specific key (like items), adjust your map call to target that key:

{this.state.data.items && this.state.data.items.map(item => (
  // Your JSX for each item here
))}

2. You're trying to map before the data finishes loading #

Fetch is asynchronous—your component renders before the data comes back, so this.state.data is initially undefined. When React tries to run map() on undefined, it throws the error.

Fixes:

• Initialize your state with an empty array:

  class YourComponent extends Component {
    state = {
      data: [] // Start with empty array instead of undefined
    };
    // ... rest of your component code
  }
  

• Add a conditional check before mapping:

  {this.state.data ? this.state.data.map(item => (
    // Your JSX here
  )) : <p>Loading data...</p>}
  

• Use the optional chain operator (modern JavaScript/React):

  {this.state.data?.map(item => (
    // Your JSX here
  ))}
  

3. Your JSON file path is incorrect (404 error) #

If your fetch request can't find the JSON file, the response will be undefined. Check your browser's Network tab to see if the request returns a 404 status.

Fix:

• If you're using Create React App, place your JSON file in the public folder, then fetch it with:

  fetch('/your-file.json')
  

• If it's in the src folder, import it directly instead of using fetch:

  import customData from './your-file.json';
  
  // Use customData directly in your component (no fetch needed)
  

Let me know if any of these fixes resolve your issue!

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