3 nybörjarreaktionsmisstag som kan förstöra din app

Som React-utvecklare kommer du att göra några misstag när du kodar med ramverket. Vissa av dessa misstag är ganska vanliga. Och på grund av deras subtila natur kan du ha svårt att identifiera dessa problem för att felsöka din applikation.

Upptäck tre av de vanligaste React-felen som utvecklare gör. Du kan göra dessa misstag som en nybörjare, medelnivå eller avancerad React-utvecklare. Men att lära dig om dem och deras konsekvenser hjälper dig att undvika och lösa dem.

1. Använder fel typ av återuppringningsfunktion

Händelsehantering är en vanlig praxis i React, via JavaScripts kraftfulla händelselyssningsfunktion. Kanske vill du ändra färgen på en knapp när du håller muspekaren över den. Kanske vill du skicka formulärdata till servern vid inlämning. I båda dessa scenarier skulle du behöva skicka en återuppringningsfunktion till händelsen för att utföra den önskade reaktionen. Det är här som vissa React-utvecklare gör misstag.

Tänk på följande komponent, till exempel:

exporterastandardfungeraApp() {
fungerahandleSubmit(e) {
 e.preventDefault()
trösta.logga("Formulär inskickad!")
 }
fungeraskriva ut(siffra) {
trösta.logga("Skriva ut", siffra)
 }
fungerafördubblare(siffra) {
lämna tillbaka() => {
trösta.logga("Dubbel", siffra * 2)
 }
 }
lämna tillbaka (
 <>
 {/* Koden kommer hit */}
 </>
 )
}

Här har du tre separata funktioner. Medan de två första funktionerna inte returnerar något, returnerar den tredje en annan funktion. Du måste ha det i åtanke eftersom det kommer att vara nyckeln till att förstå vad du kommer att lära dig härnäst.

Nu när vi går till JSX, låt oss börja med det första och vanligaste sättet att skicka en funktion som händelsehanterare:

<formonSubmit={handleSubmit}>
<inmatningtyp="text"namn="text"standardvärde="första"/>
<knapp>Skicka inknapp>
form>

Detta exempel skickar funktionens namn till händelsen via onSubmit-propet så React anropar handleSubmit när du skickar formuläret. Inuti handleSubmit kan du komma åt händelseobjektet, vilket ger dig tillgång till egenskaper som händelse.målvärde och metoder som event.preventDefault().

Det andra sättet att skicka en händelsehanterarefunktion är att anropa den i återuppringningsfunktionen. I huvudsak skickar du vidare Klicka på en funktion som anropar print() åt dig:

{[1, 5, 7].Karta((siffra) => {
lämna tillbaka (
 print (nummer)}>
 Skriv ut {nummer}
 </button>
 )
})}

Den här metoden är användbar i scenarier där du vill skicka lokal data till funktionen. Ovanstående exempel skickar varje nummer till print()-funktionen. Om du använde den första metoden skulle du inte kunna skicka argument till funktionen.

Den tredje metoden är där många utvecklare gör många misstag. Kom ihåg att dubbelfunktionen returnerar en annan funktion:

fungerafördubblare(siffra) {
lämna tillbaka() => {
trösta.logga("Dubbel", siffra * 2)
 }
}

Om du nu använde den i JSX så här:

{[1, 5, 7].Karta((siffra) => {
lämna tillbaka (
 fördubblare (antal)}>
 Dubbel {nummer}
 </button>
 )
})}

I det här fallet funktionen du kommer tillbaka från dubbel() är vad som tilldelas onClick. Det är i princip samma sak som att kopiera den returnerade funktionen och klistra in den i onClick. Den sista metoden har inget användningsfall. Oftast är det bättre att lägga till funktionen som en variabel (första metoden) eller anropa funktionen i en återuppringning (andra metoden).

Alla tre teknikerna är giltiga eftersom du i alla fall skickar en funktion till händelsen. I React måste du se till att du skickar en funktion till en händelseegendom. Det kan vara en variabel, en hårdkodad funktion (inline) eller ett objekt/funktion som returnerar en annan funktion.

2. Utmatning av noll under en falsk kontroll

När du är villkorligt återge ett element i React, kan du använda en if...else-sats eller kortslutningstekniken. Kortslutning innebär användning av dubbla et-tecken (&&). Om villkoret före et-tecken utvärderas till sant kör webbläsaren koden efter et-tecken. Om inte, så kör inte webbläsaren någon kod.

Kortslutning är den bättre tekniken tack vare dess kortfattade syntax, men det kommer med en bieffekt som många utvecklare inte lägger märke till. Detta misstag beror på att man inte förstår exakt hur JSX fungerar med falska värden.

Tänk på följande kod:

exporterastandardfungeraApp() {
konst array = [1, 2, 3, 4]
lämna tillbaka (


 {array.length && (


Array föremål:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Så länge som arrayen har något inuti sig kommer React att skriva ut varje objekt på sidan. Detta är på grund av array.length checken returnerar ett sant värde. Men vad händer om din array är tom? Först kommer de efterföljande elementen att visas på sidan, vilket är vad du kan förvänta dig. Men du skulle hitta en konstig nolla som dyker upp på din skärm.

Anledningen till det är det array.length returnerar noll. Värdet noll är falskt i JavaScript. Och problemet är att JSX återger noll på skärmen. Andra falska värden som null, false och undefined renderas inte. Detta kan leda till en dålig användarupplevelse eftersom noll alltid kommer att visas på sidan. Ibland kan nollan vara så liten att du inte ens märker den.

Lösningen är att se till att endast returnera antingen null, undefined eller false. Du gör detta genom att explicit markera noll i villkoret istället för att lita på ett falskt värde:

exporterastandardfungeraApp() {
konst array = [1, 2, 3, 4]
lämna tillbaka (


 {array.length !== 0 && (


Array föremål:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Nu kommer värdet noll inte att visas på skärmen även när arrayen är tom.

3. Misslyckas med att uppdatera staten ordentligt

När du uppdaterar tillståndet i en React-komponent måste du göra det ordentligt för att undvika oönskade biverkningar. De värsta misstagen är de som inte ger dig några fel. De gör det svårt att felsöka och ta reda på vad problemet är. Dåliga uppdateringar tenderar att ha den effekten.

Det här misstaget beror på att du inte förstår hur du uppdaterar tillståndet när du använder det befintliga tillståndet. Tänk på följande kod till exempel:

exporterastandardfungeraApp() {
konst [array, setArray] = useState([1, 2, 3])
fungeraaddNumberToStart() {
 array.unshift (nummer)
 setArray (array)
 }
fungeraaddNumberToEnd() {
 array.unshift (nummer)
 setArray (array)
 }
lämna tillbaka (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
trösta.log (array)
 }}
 >
 Lägg till 0 för att starta/sluta
 </button>
 </>
 )
}

Om du skulle köra ovanstående kod, skulle du märka att båda funktionerna lade till noll i början och slutet av arrayen. Men den har inte lagt till nollorna i arrayen som skrivs ut på sidan. Du kan fortsätta att klicka på knappen, men användargränssnittet förblir detsamma.

Detta beror på att du i båda funktionerna muterar ditt tillstånd med array.push(). React varnar uttryckligen att tillståndet måste vara oföränderligt i React, vilket betyder att du inte kan ändra det alls. React använder referensvärden med sitt tillstånd.

Lösningen är att komma åt det aktuella tillståndet (currentArray), göra en kopia av det tillståndet och göra dina uppdateringar av den kopian:

fungeraaddNumberToStart(siffra) {
 setArray((aktuellArray) => {
lämna tillbaka [nummer, ...currentArray]
 })
}
fungeraaddNumberToStart(siffra) {
 setArray((aktuellArray) => {
lämna tillbaka [...currentArray, nummer]
 })
}

Detta är rätt metod för att uppdatera tillståndet i React. När du nu klickar på knappen lägger den till noll i början och slutet av arrayen. Men viktigast av allt, uppdateringarna kommer att återspeglas på sidan omedelbart.

Andra viktiga JavaScript-koncept för React

Den här artikeln täckte några av de vanligaste misstagen man bör undvika när man kodar i React. Alla tre misstag som tas upp här beror på att JavaScript inte förstås korrekt. Eftersom React är ett JavaScript-ramverk behöver du en gedigen förståelse för JavaScript för att fungera med React. Detta innebär att lära sig de viktiga begrepp som relaterar mest till React-utveckling.