3 algaja reageerimisviga, mis võivad teie rakenduse rikkuda

Reacti arendajana teete raamistikuga kodeerides kindlasti vigu. Mõned neist vigadest on üsna tavalised. Ja nende peen olemuse tõttu võib teil olla raske neid probleeme oma rakenduse silumiseks tuvastada.

Avastage kolm levinumat Reacti viga, mida arendajad teevad. Saate neid vigu teha algaja, kesktaseme või edasijõudnud Reacti arendajana. Kuid nende ja nende tagajärgede tundmaõppimine aitab teil neid vältida ja lahendada.

1. Vale tüüpi tagasihelistamise funktsiooni kasutamine

Sündmuste käsitlemine on Reactis levinud tava, via JavaScripti võimas sündmuste kuulamise funktsioon. Võib-olla soovite muuta nupu värvi, kui sellele hõljutate. Võib-olla soovite saata vormi andmed esitamisel serverisse. Mõlema stsenaariumi korral peate soovitud reaktsiooni teostamiseks sündmusele edastama tagasihelistamise funktsiooni. Siin teevad mõned Reacti arendajad vigu.

Mõelge näiteks järgmistele komponentidele:

eksportidavaikimisifunktsiooniRakendus() {
funktsioonikäepide Esita(e) {
 e.preventDefault()
konsool.log("Vorm esitatud!")
 }
funktsiooniprintida(number) {
konsool.log("Prindi", number)
 }
funktsioonikahekordistaja(number) {
tagasi() => {
konsool.log("Kahekordne", number * 2)
 }
 }
tagasi (
 <>
 {/* Kood läheb siia */}
 </>
 )
}

Siin on teil kolm eraldi funktsiooni. Kui kaks esimest funktsiooni ei tagasta midagi, siis kolmas tagastab teise funktsiooni. Peate seda meeles pidama, sest see on võtmetähtsusega, et mõista, mida järgmisena õpite.

Nüüd, liikudes JSX-i juurde, alustame esimesest ja kõige levinumast viisist, kuidas funktsiooni sündmuste töötlejana edasi anda:

<vormion Submit={handleSubmit}>
<sisendtüüp="tekst"nimi="tekst"vaikeväärtus="esialgne"/>
<nuppu>Esitanuppu>
vormi>

See näide edastab funktsiooni nime sündmusele rekvisiitori onSubmit kaudu, nii et React kutsub vormi esitamisel käsku handleSubmit. HandhelSubmitis pääsete juurde sündmuse objektile, mis annab teile juurdepääsu sellistele omadustele nagu sündmus.sihtväärtus ja meetodeid nagu event.preventDefault().

Teine võimalus sündmuste käitleja funktsiooni edastamiseks on kutsuda see tagasihelistamise funktsiooni sees. Põhimõtteliselt annate edasiKlõpsake funktsioonil, mis kutsub teie eest välja print():

{[1, 5, 7].map((number) => {
tagasi (
 print (number)}>
 Prindi {number}
 </button>
 )
})}

See meetod on kasulik stsenaariumide korral, kus soovite funktsioonile edastada kohalikke andmeid. Ülaltoodud näide edastab iga numbri funktsioonile print(). Kui kasutaksite esimest meetodit, ei saaks te funktsiooni argumente edastada.

Kolmas meetod on see, kus paljud arendajad teevad palju vigu. Tuletage meelde, et topeltfunktsioon tagastab teise funktsiooni:

funktsioonikahekordistaja(number) {
tagasi() => {
konsool.log("Kahekordne", number * 2)
 }
}

Kui kasutasite seda JSX-is järgmiselt:

{[1, 5, 7].map((number) => {
tagasi (
 kahekordistaja (arv)}>
 Kahekordne {number}
 </button>
 )
})}

Sel juhul funktsioon, millest naased double() on see, mis onClickile määratud. See on sisuliselt sama, mis tagastatud funktsiooni kopeerimine ja selle onClicki tekstisiseselt kleepimine. Sellel viimasel meetodil pole kasutusjuhtumeid. Enamasti on parem, kui lisate funktsiooni muutujana (esimene meetod) või helistate funktsiooni tagasihelistamisel (teine ​​meetod).

Kõik kolm tehnikat kehtivad, sest kõigil juhtudel edastate sündmusele funktsiooni. Reactis peate veenduma, et edastate funktsiooni sündmuse atribuudile. See võib olla muutuja, kõvakodeeritud funktsioon (inline) või objekt/funktsioon, mis tagastab mõne muu funktsiooni.

2. Nulli väljastamine valekontrolli ajal

Kui sa oled elemendi tingimuslik renderdamine rakenduses React, võite kasutada if...muidu lauset või lühistehnikat. Lühis hõlmab topelt-A (&&) kasutamist. Kui ampersandile eelneva tingimuse väärtus on tõene, käivitab brauser ampersandile järgneva koodi. Kui ei, siis brauser ei käivita ühtegi koodi.

Lühis on parem tehnika tänu oma kokkuvõtlikule süntaksile, kuid sellel on kõrvalmõju, mida paljud arendajad ei märka. See viga juhtub seetõttu, et ei mõisteta täpselt, kuidas JSX valeväärtustega töötab.

Mõelge järgmisele koodile:

eksportidavaikimisifunktsiooniRakendus() {
konst massiiv = [1, 2, 3, 4]
tagasi (


 {array.length && (


Massiiv üksused:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Kuni massiivi sees on midagi, prindib React lehel iga üksuse. Selle põhjuseks on massiiv.pikkus tšekk tagastab tõese väärtuse. Aga mis juhtub, kui teie massiiv on tühi? Esiteks kuvatakse lehel järgnevad elemendid, mida võiks oodata. Siiski näete oma ekraanil kummalist nulli.

Selle põhjuseks on see massiiv.pikkus tagastab nulli. Väärtus null on JavaScriptis vale. Ja probleem on selles, et JSX renderdab ekraanil nulli. Muid valeväärtusi, nagu null, false ja undefined, ei renderdata. See võib kaasa tuua halva kasutajakogemuse, kuna lehel kuvatakse alati null. Mõnikord võib null olla nii väike, et te ei pane seda isegi tähele.

Lahendus on tagada, et tagastatakse ainult null, määratlemata või väär. Selleks märgite valeväärtusele tuginemise asemel tingimuses selgesõnaliselt nulli:

eksportidavaikimisifunktsiooniRakendus() {
konst massiiv = [1, 2, 3, 4]
tagasi (


 {massiiv.pikkus !== 0 && (


Massiiv üksused:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Nüüd ei kuvata väärtust null ekraanil isegi siis, kui massiiv on tühi.

3. Oleku nõuetekohase värskendamise ebaõnnestumine

Kui värskendate Reacti komponendi olekut, peate seda tegema õigesti, et vältida soovimatuid kõrvalmõjusid. Kõige hullemad vead on need, mis sinu eest vigu ei tekita. Need raskendavad silumist ja probleemi väljaselgitamist. Halva olekuga värskendused kipuvad seda mõju avaldama.

See viga tuleneb sellest, et te ei mõista, kuidas olemasolevat olekut kasutades värskendada olekut. Mõelge näiteks järgmisele koodile:

eksportidavaikimisifunktsiooniRakendus() {
konst [massiiv, setArray] = useState([1, 2, 3])
funktsiooniaddNumberToStart() {
 array.unshift (number)
 setArray (massiiv)
 }
funktsioonilisaNumberLõppu() {
 array.unshift (number)
 setArray (massiiv)
 }
tagasi (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberTo End(0)
konsool.log (massiiv)
 }}
 >
 Lisama 0 alguseni/lõpuni
 </button>
 </>
 )
}

Kui käivitaksite ülaltoodud koodi, märkaksite, et mõlemad funktsioonid lisasid massiivi algusesse ja lõppu nulli. Kuid see pole lehele prinditud massiivi nulle lisanud. Võite jätkata nuppu klõpsamist, kuid kasutajaliides jääb samaks.

Seda seetõttu, et mõlema funktsiooni puhul muudate oma olekut array.push(). React hoiatab selgesõnaliselt, et olek peab olema Reactis muutumatu, mis tähendab, et te ei saa seda üldse muuta. React kasutab oma olekuga viiteväärtusi.

Lahendus on pääseda juurde praegusele olekule (currentArray), teha sellest olekust koopia ja teha selle koopia värskendused:

funktsiooniaddNumberToStart(number) {
 setArray((praeguneArray) => {
tagasi [number, ...currentArray]
 })
}
funktsiooniaddNumberToStart(number) {
 setArray((praeguneArray) => {
tagasi [...currentArray, number]
 })
}

See on õige meetod Reacti oleku värskendamiseks. Nüüd, kui klõpsate nuppu, lisab see massiivi algusesse ja lõppu nulli. Kuid mis kõige tähtsam, värskendused kajastuvad lehel kohe.

Muud Reacti olulised JavaScripti kontseptsioonid

See artikkel käsitles mõningaid levinumaid vigu, mida Reactis kodeerimisel vältida. Kõik kolm siin käsitletud viga tulenevad JavaScripti õigesti mõistmise ebaõnnestumisest. Kuna React on JavaScripti raamistik, vajate Reactiga töötamiseks JavaScripti põhjalikult tundma. See tähendab Reacti arendamisega kõige enam seotud oluliste mõistete õppimist.