React Academy · leksjon

Feilsøke vanlige React-feil

Diagnostiser advarsler om manglende nøkler, feil med udefinert state og hydreringsfeil.

Leksjon 4 av 413 trinn

Feilsøke vanlige React-feil er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du finne årsaken til de vanligste React-feilene: advarsler om manglende key, feil med udefinert state, for mange renderinger på nytt og uoverensstemmelser ved hydrering.

Advarsel om manglende key

React logger: *Hvert underordnet element i en liste må ha en unik "key"-prop.* Dette skjer når du rendrer en matrise uten å legge til en `key`-prop. Løs problemet ved å legge til en stabil og unik key for hvert element i listen.

// Bad
items.map(item => <li>{item.name}</li>)

// Good
items.map(item => <li key={item.id}>{item.name}</li>)

Kan ikke lese egenskaper fra undefined

Denne krasjen betyr ofte at state er `undefined` ved den første renderingen. Initialiser alltid state med en trygg standardverdi (`[]` for arrayer, `{}` for objekter og `null` for verdier du kontrollerer før du bruker dem).

// Bad — crashes if data is undefined
const [data, setData] = useState();
return <p>{data.name}</p>;

// Good
const [data, setData] = useState(null);
return data ? <p>{data.name}</p> : <p>Loading...</p>;

Feilen For mange renderinger på nytt

React kaster feilen *For mange renderinger på nytt* når en komponent havner i en uendelig renderingsløkke – vanligvis fordi du kaller `setState` ubetinget under rendering, eller sender `() => setState(...)` direkte som en prop som utløses ved hver rendering.

// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

Løse For mange renderinger på nytt

Flytt state-oppdateringer til hendelsesbehandlere, eller bruk useEffect. Kall aldri setState direkte på øverste nivå i kroppen til en komponent.

// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Advarsel om uoverensstemmelse ved hydrering

I SSR-apper viser React advarselen *Hydrering mislyktes fordi det innledende brukergrensesnittet ikke samsvarer med det som ble rendret på serveren.* Vanlige årsaker er at du bruker `Date.now()` eller `Math.random()` under rendering, eller at nettleserutvidelser setter inn HTML.

Løse uoverensstemmelser ved hydrering

Flytt dynamiske verdier (tidsstempler og tilfeldige ID-er) inn i en `useState` som initialiseres inne i `useEffect`, slik at serveren alltid rendrer en statisk verdi og klienten oppdaterer den etter monteringen.

const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

State oppdateres ikke umiddelbart

Husk at `setState` er asynkront. Hvis du logger state rett etter at du har kalt den, vises den gamle verdien. Hvis du vil se den oppdaterte verdien, logger du inne i en `useEffect` som har state-variabelen som avhengighet.

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  console.log(count); // still old value!
}

useEffect(() => {
  console.log('updated:', count); // correct
}, [count]);

Komponenten oppdateres ikke når en prop endres

Hvis en komponent ikke oppdateres når en prop endres, må du kontrollere at du ikke endrer et objekt eller en matrise direkte. React bruker referanselikhet – hvis du endrer et eksisterende objekt, utløses ingen ny rendering.

// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

// Good — new array reference
setList([...list, 'item']);

Lese feil i feiloverlegget

Når en React-app krasjer under utvikling, vises et feiloverlegg i nettleseren. Les **komponentstakken** nederst – den viser alle komponentene som rendret komponenten der feilen oppstod, slik at det blir tydelig hvor feilen kommer fra.

Rask kontroll

Hva er den vanligste årsaken til React-feilen 'For mange renderinger på nytt'?

Besvar den i den interaktive leksjonen

Oppsummering

Du kan nå løse de vanligste React-feilene: legge til stabile key-er i lister, initialisere state på en trygg måte, unngå setState under rendering, håndtere uoverensstemmelser ved hydrering og lese komponentstakken i feiloverlegget.

Kurset er fullført

Gratulerer! Du har fullført **React DevTools og feilsøking**. Du kan nå installere DevTools, undersøke komponenttrær og state, profilere renderinger og finne årsaken til de vanligste kjøretidsfeilene i React.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Feilsøke vanlige React-feil» gratis?

Ja – hele teksten i «Feilsøke vanlige React-feil» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Feilsøke vanlige React-feil»?

Diagnostiser advarsler om manglende nøkler, feil med udefinert state og hydreringsfeil. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Feilsøke vanlige React-feil»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy