3 begynderreaktionsfejl, der kan ødelægge din app

Som React-udvikler er du forpligtet til at lave nogle fejl, når du koder med rammen. Nogle af disse fejl er ret almindelige. Og på grund af deres subtile karakter, kan du finde det svært at identificere disse problemer for at fejlsøge din applikation.

Opdag tre af de mest almindelige React-fejl, som udviklere laver. Du kan begå disse fejl som begynder-, mellemniveau- eller avanceret React-udvikler. Men at lære om dem og deres implikationer vil hjælpe dig med at undgå og løse dem.

1. Brug af den forkerte type tilbagekaldsfunktion

Hændelseshåndtering er en almindelig praksis i React, via JavaScripts kraftfulde begivenhedslyttefunktionalitet. Måske vil du ændre farven på en knap, når du holder markøren over den. Måske vil du sende formulardata til serveren ved indsendelse. I begge disse scenarier skal du videregive en tilbagekaldsfunktion til hændelsen for at udføre den ønskede reaktion. Det er her, nogle React-udviklere laver fejl.

Overvej for eksempel følgende komponent:

eksportStandardfungereApp() {
fungerehandleSend(e) {
 e.preventDefault()
konsol.log("Formular indsendt!")
 }
fungerePrint(nummer) {
konsol.log("Print", nummer)
 }
fungerefordobler(nummer) {
Vend tilbage() => {
konsol.log("Dobbelt", nummer * 2)
 }
 }
Vend tilbage (
 <>
 {/* Koden vil gå her */}
 </>
 )
}

Her har du tre separate funktioner. Mens de første to funktioner ikke returnerer noget, returnerer den tredje en anden funktion. Det skal du huske på, fordi det vil være nøglen til at forstå, hvad du skal lære næste gang.

Nu, når vi flytter til JSX, lad os starte med den første og mest almindelige måde, hvorpå du vil videregive en funktion som hændelseshandler:

<formved indsend={handleSubmit}>
<inputtype="tekst"navn="tekst"standard værdi="initial"/>
<knap>Indsendknap>
form>

Dette eksempel sender funktionens navn til begivenheden via onSubmit-prop, så React kalder handleSubmit, når du indsender formularen. Inde i handleSubmit kan du tilgå begivenhedsobjektet, som giver dig adgang til egenskaber som f.eks begivenhed.målværdi og metoder som event.preventDefault().

Den anden måde at videregive en hændelseshåndteringsfunktion er at kalde den inde i tilbagekaldsfunktionen. Grundlæggende giver du videre. Klik på en funktion, der kalder print() for dig:

{[1, 5, 7].kort((nummer) => {
Vend tilbage (
 print (nummer)}>
 Udskriv {nummer}
 </button>
 )
})}

Denne metode er nyttig i scenarier, hvor du vil videregive lokale data til funktionen. Ovenstående eksempel sender hvert tal til print()-funktionen. Hvis du brugte den første metode, ville du ikke være i stand til at overføre argumenter til funktionen.

Den tredje metode er, hvor mange udviklere laver mange fejl. Husk, at dobbeltfunktionen returnerer en anden funktion:

fungerefordobler(nummer) {
Vend tilbage() => {
konsol.log("Dobbelt", nummer * 2)
 }
}

Hvis du nu brugte det i JSX sådan:

{[1, 5, 7].kort((nummer) => {
Vend tilbage (
 fordobler (tal)}>
 Dobbelt {number}
 </button>
 )
})}

I dette tilfælde den funktion du vender tilbage fra dobbelt() er det, der bliver tildelt onClick. Det er grundlæggende det samme som at kopiere den returnerede funktion og indsætte den inline i onClick. Denne sidste metode har ikke nogen use case. De fleste gange er det bedre at tilføje funktionen som en variabel (første metode) eller kalde funktionen i et tilbagekald (anden metode).

Alle tre teknikker er gyldige, fordi du i alle tilfælde videregiver en funktion til begivenheden. I React skal du sørge for at videregive en funktion til en event-ejendom. Det kan være en variabel, en hårdkodet funktion (inline) eller et objekt/funktion, der returnerer en anden funktion.

2. Udsender nul under en falsk kontrol

Når du er betinget gengivelse af et element i React, kan du bruge en if...else-sætning eller kortslutningsteknikken. Kortslutning involverer brugen af ​​det dobbelte og-tegn (&&). Hvis betingelsen før og-tegnet evalueres til sand, kører browseren koden efter et-tegnet. Hvis ikke, så udfører browseren ikke nogen kode.

Kortslutning er den bedste teknik takket være dens kortfattede syntaks, men det kommer med en bivirkning, som mange udviklere ikke lægger mærke til. Denne fejl opstår på grund af ikke at forstå præcis, hvordan JSX fungerer med falske værdier.

Overvej følgende kode:

eksportStandardfungereApp() {
konst matrix = [1, 2, 3, 4]
Vend tilbage (


 {array.length && (


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

Så længe arrayet har noget inde i det, udskriver React hvert element på siden. Dette er på grund af matrix.længde check returnerer en sand værdi. Men hvad sker der, hvis dit array er tomt? Først vil de efterfølgende elementer blive vist på siden, hvilket er, hvad du ville forvente. Du vil dog finde et mærkeligt nul, der vises på din skærm.

Grunden til det er den matrix.længde returnerer nul. Værdien nul er falsk i JavaScript. Og problemet er, at JSX gengiver nul på skærmen. Andre falske værdier som null, false og undefined bliver ikke gengivet. Dette kan føre til en dårlig brugeroplevelse, fordi der altid vil blive vist nul på siden. Nogle gange kan nullet være så lille, at du ikke engang bemærker det.

Løsningen er at sørge for kun at returnere enten null, undefined eller false. Du gør dette ved eksplicit at markere nul i betingelsen i stedet for at stole på en falsk værdi:

eksportStandardfungereApp() {
konst matrix = [1, 2, 3, 4]
Vend tilbage (


 {array.length !== 0 && (


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

Nu vises værdien nul ikke på skærmen, selv når arrayet er tomt.

3. Undlader at opdatere staten korrekt

Når du opdaterer tilstanden i en React-komponent, skal du gøre det ordentligt for at undgå uønskede bivirkninger. De værste fejl er dem, der ikke kaster nogen fejl for dig. De gør det svært at fejlfinde og finde ud af, hvad problemet er. Dårlige tilstandsopdateringer har tendens til at have den effekt.

Denne fejl skyldes, at du ikke forstår, hvordan du opdaterer tilstanden, når du bruger den eksisterende tilstand. Overvej for eksempel følgende kode:

eksportStandardfungereApp() {
konst [array, setArray] = useState([1, 2, 3])
fungereaddNumberToStart() {
 array.unshift (nummer)
 setArray (array)
 }
fungereaddNumberToEnd() {
 array.unshift (nummer)
 setArray (array)
 }
Vend tilbage (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konsol.log (array)
 }}
 >
 Tilføje 0 til start/slut
 </button>
 </>
 )
}

Hvis du skulle køre ovenstående kode, ville du bemærke, at begge funktioner tilføjede nul til starten og slutningen af ​​arrayet. Men den har ikke tilføjet nuller til arrayet, der er trykt på siden. Du kan blive ved med at klikke på knappen, men brugergrænsefladen forbliver den samme.

Dette skyldes, at du i begge funktioner muterer din tilstand med array.push(). React advarer eksplicit om, at tilstanden skal være uforanderlig i React, hvilket betyder, at du slet ikke kan ændre den. React bruger referenceværdier med sin tilstand.

Løsningen er at få adgang til den aktuelle tilstand (currentArray), lave en kopi af denne tilstand og foretage dine opdateringer til denne kopi:

fungereaddNumberToStart(nummer) {
 sætArray((nuværendeArray) => {
Vend tilbage [nummer, ...currentArray]
 })
}
fungereaddNumberToStart(nummer) {
 sætArray((nuværendeArray) => {
Vend tilbage [...currentArray, nummer]
 })
}

Dette er den rigtige metode til at opdatere tilstanden i React. Når du nu klikker på knappen, tilføjer den nul til starten og slutningen af ​​arrayet. Men vigtigst af alt vil opdateringerne afspejle sig på siden med det samme.

Andre vigtige JavaScript-koncepter til React

Denne artikel dækkede nogle af de almindelige fejl, der skal undgås ved kodning i React. Alle tre fejl, der er dækket her, stammer fra manglende forståelse af JavaScript korrekt. Fordi React er en JavaScript-ramme, skal du have en solid forståelse af JavaScript for at arbejde med React. Det betyder at lære de vigtige begreber, der relaterer mest til React-udvikling.