React Academy · Oppitunti

Yleisten React-virheiden vianmääritys

Selvittäkää puuttuvien avainten varoitukset, määrittelemättömän tilan virheet ja hydraatiovirheet.

Oppitunti 4/413 vaihetta

Yleisten React-virheiden vianmääritys on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Tervetuloa

Tässä oppitunnissa selvitätte yleisimmät React-virheet: puuttuvien key-avainten varoitukset, määrittämättömään tilaan liittyvät virheet, liian monet uudelleenrenderöinnit ja hydration mismatch -tilanteet.

Puuttuvan key-avaimen varoitus

React kirjaa lokiin viestin: *Each child in a list should have a unique "key" prop.* Tämä tapahtuu, kun renderöitte taulukon lisäämättä `key`-proppia. Korjatkaa ongelma lisäämällä jokaiselle listan alkiolle pysyvä ja yksilöllinen key-avain.

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

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

Undefined-arvon ominaisuuksien lukeminen ei onnistu

Tämä kaatuminen tarkoittaa usein, että tilan arvo on ensimmäisellä renderöintikerralla `undefined`. Alustakaa tila aina turvallisella oletusarvolla (`[]` taulukoille, `{}` olioille ja `null` arvoille, jotka tarkistatte ennen niiden käyttämistä).

// 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>;

Too many re-renders -virhe

React antaa virheen *Too many re-renders*, kun komponentti joutuu loputtomaan renderöintisilmukkaan — yleensä siksi, että kutsutte `setState`-funktiota ehdoitta renderöinnin aikana tai välitätte inline-funktion `() => setState(...)` suoraan proppina, joka käynnistyy jokaisella renderöintikerralla.

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

Too many re-renders -virheen korjaaminen

Siirtäkää tilapäivitykset tapahtumankäsittelijöihin tai useEffectiin. Älkää koskaan kutsuko setState-funktiota suoraan komponentin rungon ylimmällä tasolla.

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

Hydration mismatch -varoitus

SSR-sovelluksissa React antaa varoituksen *Hydration failed because the initial UI does not match what was rendered on the server.* Yleisiä syitä ovat `Date.now()`- tai `Math.random()`-kutsut renderöinnin aikana sekä selaimen laajennukset, jotka lisäävät HTML:ää.

Hydration mismatch -tilanteiden korjaaminen

Siirtäkää dynaamiset arvot, kuten aikaleimat ja satunnaiset tunnisteet, `useState`-tilaan, joka alustetaan `useEffect`-kutsun sisällä. Näin palvelin renderöi aina staattisen arvon ja asiakas päivittää sen mounttauksen jälkeen.

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

Tila ei päivity heti

Muistakaa, että `setState` on asynkroninen. Tilan kirjaaminen lokiin heti kutsun jälkeen näyttää vanhan arvon. Näette päivitetyn arvon kirjaamalla sen `useEffect`-kutsussa, jonka riippuvuutena tilamuuttuja on.

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

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

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

Komponentti ei päivity propin muuttuessa

Jos komponentti ei päivity propin muuttuessa, tarkistakaa, ettette muuta oliota tai taulukkoa suoraan. React käyttää viitevertailua — olemassa olevan olion muuttaminen ei käynnistä uudelleenrenderöintiä.

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

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

Virheiden lukeminen virhenäkymästä

Kun React-sovellus kaatuu kehitysympäristössä, selaimeen ilmestyy virhenäkymä. Lukekaa alareunassa oleva **component stack** — se näyttää kaikki komponentit, jotka renderöivät virheen aiheuttaneen komponentin, joten virheen lähde on helppo selvittää.

Pikatarkistus

Mikä on yleisin syy Reactin Too many re-renders -virheeseen?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Osaatte nyt korjata yleisimmät React-virheet: lisätä listoihin pysyvät key-avaimet, alustaa tilan turvallisesti, välttää setState-kutsuja renderöinnin aikana, käsitellä hydration mismatch -tilanteita ja lukea virhenäkymän component stackin.

Kurssi suoritettu

Onnittelut! Olette suorittaneet kurssin **React DevTools & Debugging**. Osaatte nyt asentaa DevToolsin, tarkastella komponenttipuita ja tilaa, profiloida renderöintejä sekä selvittää yleisimmät Reactin ajonaikaiset virheet.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 88
Oppitunnit: 324

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Yleisten React-virheiden vianmääritys” ilmainen?

Kyllä – oppitunnin ”Yleisten React-virheiden vianmääritys” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Yleisten React-virheiden vianmääritys”?

Selvittäkää puuttuvien avainten varoitukset, määrittelemättömän tilan virheet ja hydraatiovirheet. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Yleisten React-virheiden vianmääritys”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

React DevToolsin asentaminen ja avaaminen
Komponenttipuiden ja propsien tarkastelu
Profiler-välilehden käyttö
Yleisten React-virheiden vianmääritys

← Takaisin: React Academy