React项目中使用Axios+useEffect获取API数据遍历数组时出现undefined报错的解决方法咨询

Alright, let's fix your code step by step—there are a few key issues causing those undefined errors and unexpected behavior:

1. Your useEffect has flawed logic #

• You're including information and isLoading in the dependency array, which creates an infinite loop: every time the request completes and updates information, the effect runs again.
• The cleanup function setting setIsLoading(false) is misplaced—it runs when the component unmounts or dependencies change, not after the request finishes. This means you might mark loading as done before the API call even completes.
• You're also using an empty URL for axios.get()—don't forget to replace that with your actual API endpoint.

2. You're storing data incorrectly #

Assuming your API returns an array of customer objects (like [{customer: {firstName: "John"}}, ...]), your current code nests this array inside another array with [...prevInfo, response.data]. This turns information into a 2D array, which breaks your later traversal.

3. Your traversal logic is wrong #

When you use information.map((item, index) => item[index].customer), you're treating each item (which is already a customer entry, or in your case, the nested array) as if it needs to be accessed via the map index. This leads to trying to access properties on undefined values once you exceed the array length.

4. No safeguards for empty/undefined data #

You don't handle loading states, empty data, or cases where customer might be missing from an entry—all of which trigger those "cannot read properties of undefined" errors.

Here's the fixed code with explanations of key changes:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const CustomerList = () => {
  // Rename state for clarity—"customers" makes more sense than "information"
  const [customers, setCustomers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null); // Add error state for failed requests

  useEffect(() => {
    // Use an async function inside useEffect (you can't make useEffect itself async)
    const fetchCustomers = async () => {
      try {
        setIsLoading(true); // Mark loading as true before starting the request
        // Replace with your actual API endpoint
        const response = await axios.get('https://your-api-url/customers');
        
        // Directly set the customers array (no need to spread previous state unless appending)
        setCustomers(response.data);
        setError(null); // Clear any previous errors on success
      } catch (err) {
        setError('Failed to load customer data'); // Handle request failures
        setCustomers([]); // Reset data on error
      } finally {
        setIsLoading(false); // Ensure loading is set to false no matter what
      }
    };

    fetchCustomers();

    // Optional: Add cleanup to cancel the request if the component unmounts
    // const cancelToken = axios.CancelToken.source();
    // return () => cancelToken.cancel('Request cancelled');
  }, []); // Empty dependency array = run only once on component mount

  // Show loading state first
  if (isLoading) {
    return <div>Loading customer list...</div>;
  }

  // Show error message if the request failed
  if (error) {
    return <div className="error">{error}</div>;
  }

  return (
    <div className="customer-list">
      <h2>Customer List</h2>
      {/* Handle empty data case */}
      {customers.length === 0 ? (
        <div>No customers found.</div>
      ) : (
        customers.map((customerEntry, index) => (
          // Use a unique key (prefer customer ID over index if available)
          <div key={index} className="customer-item">
            {/* Use optional chaining (?.) to avoid errors if customer is undefined */}
            {/* Fallback to 'N/A' if the property is missing */}
            <div>First Name: {customerEntry.customer?.firstName || 'N/A'}</div>
            <div>Last Name: {customerEntry.customer?.lastName || 'N/A'}</div>
          </div>
        ))
      )}
    </div>
  );
};

export default CustomerList;

Key improvements made: #

• Fixed useEffect logic: Runs only once on mount, properly handles loading/error states with try/catch/finally.
• Semantic state naming: customers is clearer than information and aligns with the data you're storing.
• Empty/error handling: Shows user-friendly messages instead of crashing when data is missing or requests fail.
• Safe property access: Uses optional chaining (?.) to safely access nested properties, plus a fallback (|| 'N/A') for missing values.
• Proper traversal: Directly uses each customerEntry from the array instead of incorrectly trying to index into it.

Extra tips: #

• Replace https://your-api-url/customers with your actual API endpoint.
• If your API returns a different structure (e.g., {data: [...customers]}), adjust response.data to match (like response.data.data).
• Use a unique customer ID as the key prop instead of index if your API provides one—this helps React optimize re-renders.

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