Keskitaso🐛 Debuggaus

React-tilan debuggaus

Debuggaa React-komponentin tilan ongelmia.

Suora vastaus: mitä tämä sivu antaa?

Valmis promptimalli: voit kopioida sen sellaisenaan ja muokata muuttujat omaan tilanteeseen.
Nopea käyttöönotto: mukana on täytetty esimerkki ja selitys milloin promptia kannattaa käyttää.
Jos tarvitset työkalun käyttöohjeen: jatka Cursor-oppaisiin osoitteessa `/vibekoodaus/cursor`.

Prompti

Debuggaa React-komponentin tilaongelma.

Komponentti:
[KOODI]

Ongelma: [ONGELMAN_KUVAUS]

Odotettu käyttäytyminen: [ODOTETTU]
Todellinen käyttäytyminen: [TODELLINEN]

Analysoi:
1. Miksi tila ei toimi odotetulla tavalla
2. Mahdolliset kilpailutilaongelmat
3. Korjausehdotukset
4. Parhaat käytännöt vastaavaan tilanteeseen

Suomenkieliset vinkit

Voit sekoittaa suomea ja englantia — teknisiä termejä ei tarvitse kääntää
Claude ymmärtää suomea erityisen hyvin muihin malleihin verrattuna
Voit pyytää AI:ta selittämään koodia suomeksi oppimista varten

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]
[ONGELMAN_KUVAUS]
[ODOTETTU]
[TODELLINEN]

Esimerkki

Täytetty prompti

Debuggaa React-komponentin tilaongelma.

Komponentti:
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return <button onClick={handleClick}>{count}</button>;
}

Ongelma: Nappia painaessa laskuri kasvaa vain yhdellä, vaikka kutsun setCount kolme kertaa.

Odotettu käyttäytyminen: Laskuri kasvaa kolmella joka klikkauksella
Todellinen käyttäytyminen: Laskuri kasvaa vain yhdellä

Analysoi:
1. Miksi tila ei toimi odotetulla tavalla
2. Mahdolliset kilpailutilaongelmat
3. Korjausehdotukset
4. Parhaat käytännöt vastaavaan tilanteeseen

Tulos

Selitys ja korjattu koodi.

Vinkit

Näytä koko komponentin koodi
Kuvaile odotettu vs todellinen
Mainitse milloin ongelma esiintyy

Milloin käyttää

Tila ei päivity oikein
UI ei reagoi muutoksiin
Epäsynkronisia ongelmia

Liittyvät promptit

useEffect-ongelman debuggaus

Debuggaa useEffect-hookin ongelmia kuten turhia uudelleenajoja, puuttuvia riippuvuuksia ja muistivuotoja. Saat selkeän analyysin ja korjausehdotuksen.

Keskitaso

Virheen analysointi

Analysoi virheviesti järjestelmällisesti ja löydä juurisyy. Saat selkeän selityksen mistä virhe johtuu, konkreettisen korjausehdotuksen ja vinkit vastaavan ongelman välttämiseen.

Aloittelija

Console.log-debuggaus

Lisää strategisia console.log-lauseita debuggausta varten.