React调用.NET API出现Cannot read 'map'错误，请求解决

Hey there, let's fix that frustrating error you're hitting. This is super common when dealing with async data in React, so let's break down the issues and solutions step by step.

Root Cause of the Error #

The error happens because you're trying to call map() on a value that's undefined at the time of rendering. This usually comes from two main issues:

• Your initial component state isn't set to an empty array (so React tries to map over undefined before the API response arrives)
• You're not correctly extracting the data array from the API's JSON response when updating state

Solution 1: Correct Class Component Implementation #

First, make sure you initialize your state with an empty array, then properly handle the async fetch flow and extract the data property from the API response:

import React from 'react';

class ClienteList extends React.Component {
  constructor(props) {
    super(props);
    // Initialize state with an empty array to avoid map() errors during initial render
    this.state = {
      clientes: [],
      isLoading: true,
      error: null
    };
  }

  componentDidMount() {
    fetch('https://localhost:7079/cliente/listarClientes')
      .then(response => {
        // First check if the API request succeeded
        if (!response.ok) {
          throw new Error(`Request failed with status: ${response.status}`);
        }
        return response.json();
      })
      .then(apiData => {
        // Update state with the "data" array from your API's response
        this.setState({
          clientes: apiData.data,
          isLoading: false
        });
      })
      .catch(err => {
        this.setState({
          error: err.message,
          isLoading: false
        });
        console.error('Fetch error:', err);
      });
  }

  render() {
    const { clientes, isLoading, error } = this.state;

    if (error) {
      return <div>Error loading data: {error}</div>;
    }

    if (isLoading) {
      return <div>Loading clientes...</div>;
    }

    return (
      <div>
        <h2>Lista de Clientes</h2>
        <ul>
          {/* Safely map over the array since it's always initialized as empty */}
          {clientes.map(cliente => (
            <li key={cliente.id}>
              {cliente.nome} - {cliente.email}
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default ClienteList;

Solution 2: Correct Hooks Implementation #

For functional components with Hooks, follow the same principles: initialize state with an empty array, handle async fetch in useEffect, and properly extract the data array:

import { useState, useEffect } from 'react';

function ClienteList() {
  // Initialize state with empty array, loading state, and error state
  const [clientes, setClientes] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchClientes = async () => {
      try {
        const response = await fetch('https://localhost:7079/cliente/listarClientes');
        
        if (!response.ok) {
          throw new Error(`Request failed with status: ${response.status}`);
        }

        const apiData = await response.json();
        // Update state with the "data" array from the API response
        setClientes(apiData.data);
        setIsLoading(false);
      } catch (err) {
        setError(err.message);
        setIsLoading(false);
        console.error('Fetch error:', err);
      }
    };

    fetchClientes();
  }, []); // Empty dependency array means this runs once on component mount

  if (error) {
    return <div>Error loading data: {error}</div>;
  }

  if (isLoading) {
    return <div>Loading clientes...</div>;
  }

  return (
    <div>
      <h2>Lista de Clientes</h2>
      <ul>
        {clientes.map(cliente => (
          <li key={cliente.id}>
            {cliente.nome} - {cliente.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClienteList;

Key Checks to Verify #

• Initial State: Always initialize your array state as [] (empty array) instead of undefined or null. This ensures map() can be called safely even before the API response arrives.
• API Response Parsing: Double-check that your API returns an object with a data property (e.g., { "data": [/* clientes */] }). If you accidentally set state to the entire API response object instead of apiData.data, you'll be trying to map over the object itself, which will cause errors.
• Error Handling: Adding loading and error states improves user experience and helps you debug issues with the API call.

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