Slik fikser du feilen “Cannot Read Properties of Undefined (Reading map)” i React

React-feilen Cannot read properties of undefined (reading 'map') betyr at JavaScript prøvde å evaluere noe som items.map(...) mens items var undefined. Det viktige er ikke ordet map; det er verdien umiddelbart før .map().

Gjeldende React-dokumentasjon (React 19.2 ved tidspunktet for skriving) bruker fortsatt JavaScripts array-metode map() som standardmåten å konvertere samlinger til JSX-elementer. MDN definerer Array.prototype.map() som en metode som oppretter et nytt array ved å anvende en callback på hvert element. Hvis verdien du forventer skal være et array ikke er initialisert, ikke er lastet ennå, eller kommer fra en uventet API-struktur, kan anropet feile før React kan gjengi listen. Se React sin guide til gjengivelse av lister og MDNs referanse for Array.prototype.map().

Illustrerende scenario: en produktliste som krasjer før API-et er ferdig

Dette er et hypotetisk eksempel for forklaring, ikke et reelt testresultat. Tenk deg en liten nettbutikk-komponent som henter produkter etter at komponenten først vises. Utvikleren skriver:

function ProductList() {
  const [products, setProducts] = useState();

  useEffect(() => {
    fetch('/api/products')
      .then(response => response.json())
      .then(data => setProducts(data));
  }, []);

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Ved første gjengivelse er products undefined fordi ingen startverdi ble sendt til useState. Reacts dokumentasjon for useState sier at state-verdien ved første gjengivelse samsvarer med starttilstanden du oppgir. Fetch-operasjonen kjører etterpå, så gjengivelsen kan nå products.map(...) før svaret ankommer. React useState-referanse.

Steg 1: Finn nøyaktig hvilken verdi som er udefinert

Start med stabelsporet og finn linjen som inneholder .map(). I den illustrerende komponenten er denne linjen products.map(...), så products er den første verdien å inspisere. I en større komponent kan det feilende uttrykket i stedet være data.items.map(), props.users.map() eller response.results.map().

console.log('products:', products);
console.log('is array:', Array.isArray(products));

Dette skiller mellom flere feil som ser like ut i brukergrensesnittet. Hvis verdien er undefined, undersøk initialisering eller en manglende egenskap. Hvis den er null, kan lastetilstanden/datamodellen din eksplisitt bruke null. Hvis den er et objekt, kan du lese feil nivå av et API-svar. Hvis den er en streng eller et tall, er datakontrakten oppstrøms forskjellig fra det komponenten forventer.

Erstatt ikke automatisk hvert feilende uttrykk med valgfri kjeding (optional chaining) før du forstår verdien. Det kan undertrykke krasjet mens feil dataflyt beholdes.

Steg 2: Initialiser samlingsstate som en samling når det samsvarer med modellen din

For den hypotetiske produktlisten er et tomt array en fornuftig starttilstand fordi “ingen produkter lastet ennå” trygt kan representeres som en samling med null elementer:

const [products, setProducts] = useState([]);

Nå kan første gjengivelse kjøre products.map(...) fordi et tomt array har en map-metode. Når forespørselen senere oppdaterer staten, gjengir React på nytt med de returnerte produktene.

Dette er en sterk løsning når staten konseptuelt alltid er et array. Det er mindre passende når undefined eller null bærer meningsfull informasjon, som “ikke forespurt ennå”, mens [] betyr “forespørselen er fullført og det er null resultater”. I det tilfellet, hold tilstandene distinkte og gjengir lastende, feil og tomme tilstander eksplisitt.

Steg 3: Verifiser API-svarets struktur før du setter det inn i state

Initialisering løser bare første gjengivelse. Det vil ikke beskytte komponenten hvis serveren til slutt returnerer en annen struktur. La oss si at API-et faktisk returnerer:

{
  "products": [
    { "id": 1, "name": "Keyboard" },
    { "id": 2, "name": "Mouse" }
  ]
}

Da lagrer setProducts(data) et objekt, ikke et array. Den sannsynlige feilen endres til noe som products.map is not a function. Den korrekte tildelingen ville vært setProducts(data.products), forutsatt at den egenskapen er garantert å være et array.

For data som krysser en ekstern grense, valider den:

fetch('/api/products')
  .then(response => response.json())
  .then(data => {
    if (!Array.isArray(data.products)) {
      throw new Error('Expected data.products to be an array');
    }
    setProducts(data.products);
  })
  .catch(error => {
    console.error(error);
    setError(error);
  });

Dette er viktig fordi en “sikker standardverdi” ikke bør gjøre feilformet produksjonsdata til en stille tom side. Hvis et array kreves av kontrakten, kan logging eller visning av en feil være mer nyttig enn å konvertere hvert uventede svar til [].

Steg 4: Velg riktig gjengivelseskontroll for data som legitimt kan mangle

React støtter normal JavaScript betinget gjengivelse. Den offisielle dokumentasjonen viser bruk av if, ternære uttrykk og && for å bestemme hvilken JSX som skal returneres. React guide for betinget gjengivelse.

For den hypotetiske produktsiden er en eksplisitt flyt for lasting og feil ofte den tydeligste:

if (error) {
  return <p>Could not load products.</p>;
}

if (products === undefined) {
  return <p>Loading products…</p>;
}

if (products.length === 0) {
  return <p>No products found.</p>;
}

return (
  <ul>
    {products.map(product => (
      <li key={product.id}>{product.name}</li>
    ))}
  </ul>
);

Valgfri kjeding er også gyldig når “mangler for øyeblikket” bare skal produsere ingen kartlagt resultat:

{products?.map(product => (
  <ProductCard key={product.id} product={product} />
))}

MDN forklarer at valgfri kjeding (?.) avbryter (short-circuits) når verdien til venstre for den er null eller undefined, i stedet for å kaste en TypeError. MDN referanse for valgfri kjeding.

Begrensningen er viktig: products?.map(...) forhindrer denne spesifikke nullish-tilgangsfeilen, men det beviser ikke at products er et array. Hvis products blir et objekt, vil products?.map fortsatt løses til en udefinert egenskap, og forsøk på å kalle den kan feile. Bruk skjemavalidering eller Array.isArray() når datatypen i seg selv er usikker.

Hvilken løsning bør du velge?

Vanlige tilfeller som ser ut som den samme feilen

API-et returnerer { items: [...] }, men komponenten forventer et array

Inspekter nettverkssvaret og tildel array-egenskapen i stedet for wrapper-objektet. Gjett ikke strukturen fra et gammelt eksempel eller TypeScript-grensesnitt hvis det levende svaret er forskjellig.

En foreldrekomponent glemmer å sende prop-en

Dette vil feile:

function UserList({ users }) {
  return users.map(user => <div key={user.id}>{user.name}</div>);
}

// Parent accidentally omits users:
<UserList />

Hvis en utelatt prop skal bety en tom liste, gjør en standardverdi den kontrakten eksplisitt:

function UserList({ users = [] }) {
  return users.map(user => <div key={user.id}>{user.name}</div>);
}

En nøstet egenskap mangler

Med response.data.items.map(...) kan enhver manglende mellomliggende egenskap feile. Valgfri kjeding som response?.data?.items er nyttig for å lese usikre nøstede verdier, men valider den endelige samlingen før du behandler den som et array.

Første gjengivelse skjer før en fetch-Effekt er fullført

React Effekter kjører etter gjengivelse. Reacts dokumentasjon merker også at manuell datahenting inne i Effekter er vanlig i klientapplikasjoner, men kan ha ulemper som vannfall, manglende servergjengitte data og manuelt arbeid med caching/kappløp. Hvis du bruker et React-rammeverk, kan dens innebygde mekanismer for datainnlasting være et bedre arkitektonisk valg. React useEffect-referanse.

En tryggere endelig versjon av den illustrerende komponenten

import { useEffect, useState } from 'react';

export default function ProductList() {
  const [products, setProducts] = useState(undefined);
  const [error, setError] = useState(null);

  useEffect(() => {
    let ignore = false;

    fetch('/api/products')
      .then(response => {
        if (!response.ok) throw new Error('Request failed');
        return response.json();
      })
      .then(data => {
        if (!Array.isArray(data.products)) {
          throw new Error('Expected products array');
        }
        if (!ignore) setProducts(data.products);
      })
      .catch(error => {
        if (!ignore) setError(error);
      });

    return () => {
      ignore = true;
    };
  }, []);

  if (error) return <p>Could not load products.</p>;
  if (products === undefined) return <p>Loading products…</p>;
  if (products.length === 0) return <p>No products found.</p>;

  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

Denne versjonen skiller bevisst mellom “ikke lastet”, “feilet”, “tom” og “har data”. Det er mer omfattende enn et enkelt valgfri-kjeding-uttrykk, men det gir brukeren et meningsfullt brukergrensesnitt for hver tilstand og gjør et feilformet API-svar synlig under feilsøking.

Rask sjekkliste før du anser feilen som fikset

• Identifiser den nøyaktige verdien umiddelbart før .map().
• Bekreft dens verdi og type på gjengivelsen som feiler.
• Initialiser listestate med [] når et tomt array nøyaktig representerer starttilstanden.
• Sjekk om API-et returnerer et array direkte eller pakker det inn i en objekt-egenskap.
• Valider eksterne data før du lagrer dem i state når kontrakten er viktig.
• Bruk en lastetilstand hvis undefined betyr “ikke lastet ennå”.
• Bruk valgfri kjeding når fravær er legitimt, ikke som en erstatning for å forstå dårlige data.
• Sjekk omdøpte eller utelatte props etter refaktoreringer.
• Gi gjengitte liste-elementer stabile nøkler fra dataene, som anbefalt av Reacts dokumentasjon for listegjengivelse.

For den hypotetiske produktlisten var rotårsaken at første gjengivelse mottok undefined der komponenten umiddelbart forventet et array. I en ekte applikasjon kan den samme feilmeldingen komme fra state-initialisering, props, nøstede egenskaper eller API-data. Fiks datakontrakten først, velg deretter en gjengivelseskontroll som nøyaktig representerer hva “mangler” betyr i ditt brukergrensesnitt.