3 početničke React pogreške koje mogu uništiti vašu aplikaciju

Kao React programer, sigurno ćete pogriješiti prilikom kodiranja s okvirom. Neke od ovih pogrešaka prilično su česte. A zbog njihove suptilne prirode, možda će vam biti teško prepoznati te probleme da biste otklonili pogreške u svojoj aplikaciji.

Otkrijte tri najčešće React pogreške koje rade programeri. Ove pogreške možete napraviti kao početnik, srednji ili napredni React programer. Ali učenje o njima i njihovim implikacijama pomoći će vam da ih izbjegnete i riješite.

1. Korištenje pogrešne vrste funkcije povratnog poziva

Rukovanje događajima je uobičajena praksa u Reactu, putem Moćna funkcija JavaScripta za slušanje događaja. Možda želite promijeniti boju gumba kada zadržite pokazivač na njemu. Možda želite poslati podatke obrasca poslužitelju prilikom podnošenja. U oba ova scenarija, trebali biste proslijediti funkciju povratnog poziva događaju kako biste izvršili željenu reakciju. Ovdje neki React programeri griješe.

Razmotrite sljedeću komponentu, na primjer:

izvozzadanofunkcijaaplikacija() {
funkcijarukovanjePošalji(e) {
 e.preventDefault()
konzola.log("Obrazac predan!")
 }
funkcijaispisati(broj) {
konzola.log("Ispis", broj)
 }
funkcijadupler(broj) {
povratak() => {
konzola.log("Dvostruko", broj * 2)
 }
 }
povratak (
 <>
 {/* Kod će ići ovdje */}
 </>
 )
}

Ovdje imate tri odvojene funkcije. Dok prve dvije funkcije ne vraćaju ništa, treća vraća drugu funkciju. Morate to imati na umu jer će to biti ključno za razumijevanje onoga što ćete sljedeće učiti.

Sada, prelazimo na JSX, počnimo s prvim i najčešćim načinom na koji biste proslijedili funkciju kao rukovatelj događajima:

<oblikonSubmit={handleSubmit}>
<ulaznitip="tekst"Ime="tekst"defaultValue="početni"/>
<dugme>podnijetidugme>
oblik>

Ovaj primjer prosljeđuje naziv funkcije događaju putem onSubmit prop, tako da React poziva handleSubmit kada pošaljete obrazac. Unutar handleSubmit možete pristupiti objektu događaja koji vam daje pristup svojstvima kao što su event.target.value i metode poput event.preventDefault().

Drugi način prosljeđivanja funkcije rukovatelja događajem je pozivanje unutar funkcije povratnog poziva. U biti, onClicku prosljeđujete funkciju koja umjesto vas poziva print():

{[1, 5, 7].karta((broj) => {
povratak (
 ispis (broj)}>
 Ispis {number}
 </button>
 )
})}

Ova je metoda korisna u scenarijima u kojima želite proslijediti lokalne podatke funkciji. Gornji primjer prosljeđuje svaki broj funkciji print(). Ako ste koristili prvu metodu, tada ne biste mogli proslijediti argumente u funkciju.

Treća metoda je gdje mnogi programeri čine puno grešaka. Podsjetimo se da funkcija dupliranja vraća drugu funkciju:

funkcijadupler(broj) {
povratak() => {
konzola.log("Dvostruko", broj * 2)
 }
}

Ako ste ga koristili u JSX-u ovako:

{[1, 5, 7].karta((broj) => {
povratak (
 dupler (broj)}>
 Dupli {number}
 </button>
 )
})}

U ovom slučaju, funkcija s koje se vraćate dvostruko() je ono što se dodjeljuje onClick-u. To je u biti isto kao kopiranje vraćene funkcije i njeno lijepljenje u onClick. Ova zadnja metoda nema nijedan slučaj upotrebe. U većini slučajeva bolje je dodati funkciju kao varijablu (prva metoda) ili pozvati funkciju unutar povratnog poziva (druga metoda).

Sve tri tehnike su važeće jer u svim slučajevima prosljeđujete funkciju događaju. U Reactu morate biti sigurni da prosljeđujete funkciju svojstvu događaja. To može biti varijabla, tvrdo kodirana funkcija (umetnuta) ili objekt/funkcija koja vraća drugu funkciju.

2. Izlaz nule tijekom lažne provjere

Kada si uvjetno renderiranje elementa u Reactu, možete koristiti naredbu if...else ili tehniku ​​kratkog spoja. Kratko spajanje uključuje upotrebu dvostrukog znaka & (&&). Ako se uvjet prije ampersanda ocijeni istinitim, tada preglednik pokreće kod nakon ampersanda. Ako nije, tada preglednik ne izvršava nikakav kod.

Kratki spoj je bolja tehnika zahvaljujući sažetoj sintaksi, ali dolazi s nuspojavom koju mnogi programeri ne primjećuju. Ova pogreška se događa zbog nerazumijevanja kako točno JSX radi s lažnim vrijednostima.

Razmotrite sljedeći kôd:

izvozzadanofunkcijaaplikacija() {
konst niz = [1, 2, 3, 4]
povratak (


 {array.length && (


Niz stavke:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Sve dok niz ima nešto unutar sebe, React će ispisati svaku stavku na stranici. To je zbog niz.duljina provjera vraća istinitu vrijednost. Ali što se događa ako je vaš niz prazan? Prvo će se elementi koji slijede prikazati na stranici, što biste i očekivali. Međutim, na zaslonu biste vidjeli čudnu nulu.

Razlog tome je taj niz.duljina vraća nulu. Vrijednost nula je netočna u JavaScriptu. A problem je što JSX renderira nulu na ekranu. Druge lažne vrijednosti kao što su null, false i undefined ne prikazuju se. To može dovesti do lošeg korisničkog iskustva jer će se na stranici uvijek pojaviti nula. Ponekad nula može biti toliko mala da je niti ne primijetite.

Rješenje je osigurati da vratite samo null, undefined ili false. To činite izričitom provjerom nule u uvjetu umjesto da se oslanjate na lažnu vrijednost:

izvozzadanofunkcijaaplikacija() {
konst niz = [1, 2, 3, 4]
povratak (


 {array.length !== 0 && (


Niz stavke:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Sada se vrijednost nula neće prikazati na ekranu čak ni kada je polje prazno.

3. Neispravno ažuriranje stanja

Kada ažurirate stanje u React komponenti, morate to učiniti ispravno kako biste izbjegli bilo kakve neželjene nuspojave. Najgore pogreške su one koje vam ne stvaraju nikakve pogreške. Oni otežavaju otklanjanje pogrešaka i otkrivanje u čemu je problem. Loša ažuriranja stanja obično imaju takav učinak.

Ova pogreška proizlazi iz nerazumijevanja kako ažurirati stanje kada koristite postojeće stanje. Razmotrite na primjer sljedeći kod:

izvozzadanofunkcijaaplikacija() {
konst [niz, setArray] = useState([1, 2, 3])
funkcijadodajBrojPočetku() {
 array.unshift (broj)
 setArray (niz)
 }
funkcijadodajBrojNaKraj() {
 array.unshift (broj)
 setArray (niz)
 }
povratak (
 <>
 {array.join(", ")}


 onClick={() => {
 dodajBrojNaPočetak(0)
 dodajBrojNaKraj(0)
konzola.log (niz)
 }}
 >
 Dodati 0 na početak/kraj
 </button>
 </>
 )
}

Ako biste pokrenuli gornji kod, primijetili biste da su obje funkcije dodale nulu na početak i kraj niza. Ali nije dodao nule u niz ispisan na stranici. Možete nastaviti klikati gumb, ali korisničko sučelje ostaje isto.

To je zato što, u obje funkcije, mutirate svoje stanje pomoću array.push(). React izričito upozorava da stanje mora biti nepromjenjivo u Reactu, što znači da ga uopće ne možete promijeniti. React koristi referentne vrijednosti sa svojim stanjem.

Rješenje je pristupiti trenutnom stanju (currentArray), napraviti kopiju tog stanja i ažurirati tu kopiju:

funkcijadodajBrojPočetku(broj) {
 setArray((trenutni niz) => {
povratak [broj, ...trenutni niz]
 })
}
funkcijadodajBrojPočetku(broj) {
 setArray((trenutni niz) => {
povratak [...trenutni niz, broj]
 })
}

Ovo je prava metoda za ažuriranje stanja u Reactu. Sada kada kliknete gumb, on dodaje nulu na početak i kraj niza. Ali što je najvažnije, ažuriranja će se odmah odraziti na stranici.

Drugi važni JavaScript koncepti za React

Ovaj članak pokriva neke od uobičajenih pogrešaka koje treba izbjegavati prilikom kodiranja u Reactu. Sve tri ovdje navedene pogreške proizlaze iz neuspjeha u pravilnom razumijevanju JavaScripta. Budući da je React okvir JavaScripta, trebat će vam solidno razumijevanje JavaScripta da biste radili s Reactom. To znači naučiti važne koncepte koji se najviše odnose na React razvoj.