3 Aloittelijan reagointivirhettä, jotka voivat pilata sovelluksesi

React-kehittäjänä teet varmasti joitain virheitä koodattaessasi viitekehyksen kanssa. Jotkut näistä virheistä ovat melko yleisiä. Ja niiden hienovaraisen luonteen vuoksi saatat olla vaikea tunnistaa näitä ongelmia sovelluksesi virheenkorjauksessa.

Tutustu kolmeen yleisimpiin kehittäjien tekemiin React-virheisiin. Voit tehdä nämä virheet aloittelijana, keskitasona tai edistyneenä React-kehittäjänä. Mutta oppiminen niistä ja niiden vaikutuksista auttaa sinua välttämään ja ratkaisemaan ne.

1. Väärän tyyppisen takaisinsoittotoiminnon käyttäminen

Tapahtumankäsittely on yleinen käytäntö Reactissa, kautta JavaScriptin tehokas tapahtumien kuuntelutoiminto. Ehkä haluat muuttaa painikkeen väriä, kun osoitin vie sen päälle. Ehkä haluat lähettää lomakkeen tiedot palvelimelle lähetyksen yhteydessä. Molemmissa näissä skenaarioissa sinun on välitettävä takaisinsoittotoiminto tapahtumalle halutun reaktion suorittamiseksi. Tässä jotkut React-kehittäjät tekevät virheitä.

Harkitse esimerkiksi seuraavaa komponenttia:

viedäoletuksenatoimintoSovellus() {
toimintokäsitteleLähetä(e) {
 e.preventDefault()
konsoli.Hirsi("Lomake lähetetty!")
 }
toimintoTulosta(määrä) {
konsoli.Hirsi("Tulosta", numero)
 }
toimintotuplaaja(määrä) {
palata() => {
konsoli.Hirsi("Kaksinkertainen", numero * 2)
 }
 }
palata (
 <>
 {/* Koodi menee tähän */}
 </>
 )
}

Tässä sinulla on kolme erillistä toimintoa. Vaikka kaksi ensimmäistä funktiota ei palauta mitään, kolmas palauttaa toisen funktion. Sinun on pidettävä tämä mielessä, koska se on avainasemassa ymmärtäessäsi, mitä opit seuraavaksi.

Siirrytään nyt JSX: ään ja aloitetaan ensimmäisestä ja yleisimmästä tavasta, jolla välität funktion tapahtumakäsittelijänä:

<muodossaonSubmitissa={handleSubmit}>
<syöttötyyppi="teksti"nimi="teksti"oletusarvo="alkukirjain"/>
<-painiketta>Lähetä-painiketta>
muodossa>

Tämä esimerkki välittää funktion nimen tapahtumalle onSubmit-ehdotuksen kautta, joten React kutsuu handleSubmit, kun lähetät lomakkeen. HandelSubmitissa pääset tapahtumaobjektiin, joka antaa sinulle pääsyn ominaisuuksiin, kuten tapahtuma.kohde.arvo ja menetelmiä kuten event.preventDefault().

Toinen tapa välittää tapahtumakäsittelijätoiminto on kutsua sitä takaisinsoittotoiminnon sisällä. Käytännössä siirrät eteenpäinNapsauta funktiota, joka kutsuu print()-funktiota puolestasi:

{[1, 5, 7].kartta((määrä) => {
palata (
 tulosta (numero)}>
 Tulosta {number}
 </button>
 )
})}

Tämä menetelmä on hyödyllinen skenaarioissa, joissa haluat välittää paikallista tietoa funktiolle. Yllä oleva esimerkki välittää jokaisen numeron print()-funktiolle. Jos käytit ensimmäistä menetelmää, et pystyisi välittämään argumentteja funktioon.

Kolmannessa menetelmässä monet kehittäjät tekevät paljon virheitä. Muista, että tuplausfunktio palauttaa toisen funktion:

toimintotuplaaja(määrä) {
palata() => {
konsoli.Hirsi("Kaksinkertainen", numero * 2)
 }
}

Nyt jos käytit sitä JSX: ssä näin:

{[1, 5, 7].kartta((määrä) => {
palata (
 tuplaaja (numero)}>
 Double {number}
 </button>
 )
})}

Tässä tapauksessa funktio, josta palaat kaksinkertainen() onClickille määrätään. Se on pohjimmiltaan sama kuin palautetun funktion kopioiminen ja sen liittäminen onClickiin. Tällä viimeisellä menetelmällä ei ole mitään käyttötapaa. Useimmiten sinun on parempi lisätä funktio muuttujaksi (ensimmäinen menetelmä) tai kutsua funktio takaisinkutsussa (toinen menetelmä).

Kaikki kolme tekniikkaa ovat kelvollisia, koska kaikissa tapauksissa välität tapahtumalle funktion. Reactissa sinun on varmistettava, että välität funktion tapahtumaominaisuuteen. Se voi olla muuttuja, kovakoodattu funktio (inline) tai objekti/funktio, joka palauttaa toisen funktion.

2. Nollan tulostaminen väärän tarkistuksen aikana

Kun olet ehdollisesti renderöimällä elementin Reactissa, voit käyttää if...else-lausetta tai oikosulkutekniikkaa. Oikosulkussa käytetään kaksois-et-merkkiä (&&). Jos et-merkkiä edeltävän ehdon arvo on tosi, selain suorittaa et-merkkiä seuraavan koodin. Jos ei, selain ei suorita mitään koodia.

Oikosulku on parempi tekniikka tiiviin syntaksinsa ansiosta, mutta sillä on sivuvaikutus, jota monet kehittäjät eivät huomaa. Tämä virhe johtuu siitä, että ei ymmärrä tarkalleen, kuinka JSX toimii väärien arvojen kanssa.

Harkitse seuraavaa koodia:

viedäoletuksenatoimintoSovellus() {
konst array = [1, 2, 3, 4]
palata (


 {array.length && (


Array tuotteet:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Niin kauan kuin taulukossa on jotain sisällä, React tulostaa jokaisen sivun kohteen. Tämä johtuu siitä array.length sekki palauttaa totuudenmukaisen arvon. Mutta mitä tapahtuu, jos taulukkosi on tyhjä? Ensinnäkin seuraavat elementit näkyvät sivulla, mitä voit odottaa. Näytöllesi tulee kuitenkin outo nolla.

Syy siihen on se array.length palauttaa nollan. Arvo nolla on väärä JavaScriptissä. Ja ongelma on, että JSX tekee nollan näytöllä. Muita vääriä arvoja, kuten null, false ja undefined, ei hahmonneta. Tämä voi johtaa huonoon käyttökokemukseen, koska sivulla näkyy aina nolla. Joskus nolla voi olla niin pieni, että et edes huomaa sitä.

Ratkaisu on varmistaa, että palautetaan vain joko tyhjä, määrittelemätön tai epätosi. Voit tehdä tämän valitsemalla ehdon nollan sen sijaan, että luottaisit väärään arvoon:

viedäoletuksenatoimintoSovellus() {
konst array = [1, 2, 3, 4]
palata (


 {array.length !== 0 && (


Array tuotteet:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Nyt arvo nolla ei näy näytöllä, vaikka taulukko olisi tyhjä.

3. Tilan päivittäminen epäonnistui

Kun päivität React-komponentin tilaa, sinun on tehtävä se oikein välttääksesi ei-toivotut sivuvaikutukset. Pahimmat virheet ovat ne, jotka eivät aiheuta virheitä puolestasi. Ne tekevät virheenkorjauksen ja ongelman selvittämisen vaikeaksi. Huonoilla tilapäivityksillä on yleensä tämä vaikutus.

Tämä virhe johtuu siitä, että et ymmärrä, kuinka tila päivitetään, kun käytät olemassa olevaa tilaa. Harkitse esimerkiksi seuraavaa koodia:

viedäoletuksenatoimintoSovellus() {
konst [array, setArray] = useState([1, 2, 3])
toimintoaddNumberToStart() {
 array.unshift (numero)
 setArray (taulukko)
 }
toimintoAddNumberToEnd() {
 array.unshift (numero)
 setArray (taulukko)
 }
palata (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konsoli.log (taulukko)
 }}
 >
 Lisätä 0 alkuun/loppuun
 </button>
 </>
 )
}

Jos suoritat yllä olevan koodin, huomaat, että molemmat funktiot lisäsivät nollan taulukon alkuun ja loppuun. Mutta se ei ole lisännyt nollia sivulle tulostettuun taulukkoon. Voit jatkaa painikkeen painamista, mutta käyttöliittymä pysyy samana.

Tämä johtuu siitä, että molemmissa funktioissa olet muuntamassa tilaasi array.push(). React varoittaa nimenomaisesti, että tilan on oltava muuttumaton Reactissa, mikä tarkoittaa, että et voi muuttaa sitä ollenkaan. React käyttää viitearvoja tilassaan.

Ratkaisu on käyttää nykyistä tilaa (currentArray), tehdä kopio tilasta ja tehdä päivitykset kyseiseen kopioon:

toimintoaddNumberToStart(määrä) {
 setArray((currentArray) => {
palata [numero, ...currentArray]
 })
}
toimintoaddNumberToStart(määrä) {
 setArray((currentArray) => {
palata [...currentArray, number]
 })
}

Tämä on oikea tapa päivittää Reactin tila. Nyt kun napsautat painiketta, se lisää nollan taulukon alkuun ja loppuun. Mutta mikä tärkeintä, päivitykset näkyvät sivulla välittömästi.

Muita tärkeitä JavaScript-käsitteitä Reactille

Tämä artikkeli käsitteli joitain yleisiä virheitä, joita tulee välttää koodattaessa Reactissa. Kaikki kolme tässä käsiteltyä virhettä johtuvat siitä, että JavaScript ei ymmärretty kunnolla. Koska React on JavaScript-kehys, tarvitset vankan käsityksen JavaScriptistä toimiaksesi Reactin kanssa. Tämä tarkoittaa React-kehitykseen eniten liittyvien tärkeiden käsitteiden oppimista.