PricingLoginStart free
React Academy · Lektion

Fejlfinding af almindelige React-fejl

Diagnosticér advarsler om manglende keys, fejl i undefined state og hydreringsfejl.

Lektion 4 af 413 trin

Fejlfinding af almindelige React-fejl er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion lærer du at diagnosticere de mest almindelige React-fejl: advarsler om manglende keys, fejl i udefineret tilstand, for mange gengivelser og hydreringsuoverensstemmelser.

Advarsel om manglende key

React logger: *Hvert element i en liste skal have en unik "key"-prop.* Det sker, når du gengiver en liste uden at tilføje en `key`-prop. Ret det ved at tilføje en stabil, unik key til 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 læse egenskaber fra undefined

Dette nedbrud betyder ofte, at din tilstand er `undefined` ved den første gengivelse. Initialiser altid tilstanden med en sikker standardværdi (`[]` for lister, `{}` for objekter og `null` for værdier, som du kontrollerer, før du bruger 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>;

Fejlen For mange gengivelser

React udløser fejlen *For mange gengivelser*, når en komponent kommer ind i en uendelig gengivelsesløkke — som regel fordi du kalder `setState` ubetinget under gengivelsen eller sender en inline-`() => setState(...)` direkte som en prop, der udløses ved hver gengivelse.
// Bad — setState called on every render
function Counter() {
  const [n, setN] = useState(0);
  setN(n + 1); // infinite loop!
  return <p>{n}</p>;
}

Sådan løser du for mange gengivelser

Flyt tilstandsopdateringer ind i hændelseshandlere eller `useEffect`. Kald aldrig `setState` direkte på øverste niveau i en komponents brødtekst.
// Good — update only on click
function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

Advarsel om hydreringsuoverensstemmelse

I SSR-apps advarer React: *Hydrering mislykkedes, fordi den indledende brugerflade ikke stemmer overens med det, der blev gengivet på serveren.* Almindelige årsager er brug af `Date.now()` eller `Math.random()` under gengivelsen eller browserudvidelser, der indsætter HTML.

Sådan løser du hydreringsuoverensstemmelser

Flyt dynamiske værdier (tidsstempler og tilfældige id'er) ind i en `useState`, der initialiseres i `useEffect`, så serveren altid gengiver en statisk værdi, og klienten opdaterer den efter monteringen.
const [ts, setTs] = useState('');
useEffect(() => {
  setTs(Date.now().toString());
}, []);
return <p>{ts}</p>;

Tilstanden opdateres ikke med det samme

Husk, at `setState` er asynkron. Hvis du logger tilstanden lige efter kaldet, vises den gamle værdi. Hvis du vil se den opdaterede værdi, skal du logge inde i en `useEffect`, der har tilstandsvariablen som afhængighed.
const [count, setCount] = useState(0);

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

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

Komponenten opdateres ikke ved ændring af en prop

Hvis en komponent ikke opdateres, når en prop ændres, skal du kontrollere, at du ikke ændrer et objekt eller en liste direkte. React bruger referencelighed — en ændring af et eksisterende objekt udløser ikke en ny gengivelse.
// Bad — same reference, no re-render
const list = [];
list.push('item');
setList(list);

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

Læsning af fejl i fejloverlayet

Når en React-app går ned under udvikling, vises et fejloverlay i browseren. Læs **komponentstakken** nederst — den viser alle komponenter, der gengav den komponent, hvor fejlen opstod, så du tydeligt kan se, hvor fejlen kommer fra.

Hurtigt tjek

Hvad er den mest almindelige årsag til React-fejlen 'For mange gengivelser'?
Besvar den i den interaktive lektion

Opsummering

Du kan nu løse de mest almindelige React-fejl: tilføje stabile keys til lister, initialisere tilstanden sikkert, undgå `setState` under gengivelsen, håndtere hydreringsuoverensstemmelser og læse komponentstakken i fejloverlayet.

Kurset er fuldført

Tillykke! Du har gennemført **React DevTools & Debugging**. Du kan nu installere DevTools, undersøge komponenttræer og tilstand, profilere gengivelser og diagnosticere de hyppigste React-fejl under kørsel.
Gratis at komme i gang

Lær React med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Fejlfinding af almindelige React-fejl” gratis?

Ja — hele teksten til “Fejlfinding af almindelige React-fejl” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Fejlfinding af almindelige React-fejl”?

Diagnosticér advarsler om manglende keys, fejl i undefined state og hydreringsfejl. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Academy?

Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Fejlfinding af almindelige React-fejl”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Academy-lektion?

Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Installation og åbning af React DevTools
  2. Inspektion af komponenttræer og props
  3. Brug af fanen Profiler
  4. Fejlfinding af almindelige React-fejl
← Tilbage til React Academy