3 nybegynnerreaksjonsfeil som kan ødelegge appen din

Som React-utvikler er du nødt til å gjøre noen feil når du koder med rammeverket. Noen av disse feilene er ganske vanlige. Og på grunn av deres subtile natur, kan du finne det vanskelig å identifisere disse problemene for å feilsøke applikasjonen din.

Oppdag tre av de vanligste React-feilene som utviklere gjør. Du kan gjøre disse feilene som en nybegynner, mellomnivå eller avansert React-utvikler. Men å lære om dem og deres implikasjoner vil hjelpe deg å unngå og løse dem.

1. Bruk av feil type tilbakeringingsfunksjon

Hendelseshåndtering er en vanlig praksis i React, via JavaScripts kraftige hendelseslyttingsfunksjonalitet. Kanskje du vil endre fargen på en knapp når du holder markøren over den. Kanskje du vil sende skjemadata til serveren ved innsending. I begge disse scenariene må du sende en tilbakeringingsfunksjon til hendelsen for å utføre ønsket reaksjon. Det er her noen React-utviklere gjør feil.

Tenk på følgende komponent, for eksempel:

eksportmisligholdefunksjonApp() {
funksjonhandleSend inn(e) {
 e.preventDefault()
konsoll.Logg("Skjema sendt!")
 }
funksjonskrive ut(Antall) {
konsoll.Logg("Skrive ut", Antall)
 }
funksjondobler(Antall) {
komme tilbake() => {
konsoll.Logg("Dobbelt", Antall * 2)
 }
 }
komme tilbake (
 <>
 {/* Koden vil gå her */}
 </>
 )
}

Her har du tre separate funksjoner. Mens de to første funksjonene ikke returnerer noe, returnerer den tredje en annen funksjon. Du må ha det i bakhodet fordi det vil være nøkkelen til å forstå hva du skal lære neste gang.

Når vi nå flytter til JSX, la oss begynne med den første og vanligste måten du sender en funksjon som hendelsesbehandler på:

<formved innsending={handleSubmit}>
<inputtype="tekst"Navn="tekst"standardverdi="første"/>
<knapp>Sende innknapp>
form>

Dette eksemplet sender funksjonens navn til hendelsen via onSubmit-proppet slik at React kaller handleSubmit når du sender inn skjemaet. Inne i handleSubmit kan du få tilgang til hendelsesobjektet, som gir deg tilgang til egenskaper som event.målverdi og metoder som event.preventDefault().

Den andre måten å sende en hendelsesbehandlerfunksjon på er å kalle den inne i tilbakeringingsfunksjonen. I hovedsak sender du videre. Klikk på en funksjon som kaller print() for deg:

{[1, 5, 7].kart((Antall) => {
komme tilbake (
 print (nummer)}>
 Skriv ut {nummer}
 </button>
 )
})}

Denne metoden er nyttig i scenarier der du ønsker å overføre lokale data til funksjonen. Eksemplet ovenfor sender hvert tall til print()-funksjonen. Hvis du brukte den første metoden, ville du ikke kunne sende argumenter inn i funksjonen.

Den tredje metoden er hvor mange utviklere gjør mange feil. Husk at doblerfunksjonen returnerer en annen funksjon:

funksjondobler(Antall) {
komme tilbake() => {
konsoll.Logg("Dobbelt", Antall * 2)
 }
}

Nå hvis du brukte den i JSX slik:

{[1, 5, 7].kart((Antall) => {
komme tilbake (
 dobler (tall)}>
 Dobbelt {number}
 </button>
 )
})}

I dette tilfellet funksjonen du kommer tilbake fra dobbelt() er det som blir tildelt onClick. Det er i hovedsak det samme som å kopiere den returnerte funksjonen og lime den inn i onClick. Denne siste metoden har ikke noe bruksområde. De fleste ganger er det bedre å legge til funksjonen som en variabel (første metode) eller kalle funksjonen i en tilbakeringing (andre metode).

Alle tre teknikkene er gyldige fordi du i alle tilfeller sender en funksjon til hendelsen. I React må du sørge for at du sender en funksjon til en hendelseseiendom. Det kan være en variabel, en hardkodet funksjon (inline), eller et objekt/funksjon som returnerer en annen funksjon.

2. Utdata null under en falsk sjekk

Når du betinget gjengivelse av et element i React, kan du bruke en if...else-setning eller kortslutningsteknikken. Kortslutning innebærer bruk av det doble og-tegnet (&&). Hvis betingelsen før og-tegnet evalueres til sann, kjører nettleseren koden etter og-tegnet. Hvis ikke, kjører ikke nettleseren noen kode.

Kortslutning er den beste teknikken takket være dens konsise syntaks, men det kommer med en bieffekt som mange utviklere ikke legger merke til. Denne feilen skjer fordi du ikke forstår nøyaktig hvordan JSX fungerer med falske verdier.

Tenk på følgende kode:

eksportmisligholdefunksjonApp() {
konst array = [1, 2, 3, 4]
komme tilbake (


 {array.length && (


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

Så lenge matrisen har noe inni seg, vil React skrive ut hvert element på siden. Dette er på grunn av array.length sjekken returnerer en sann verdi. Men hva skjer hvis matrisen din er tom? Først vil de påfølgende elementene vises på siden, som er det du forventer. Du vil imidlertid finne en merkelig null på skjermen din.

Grunnen til det er det array.length returnerer null. Verdien null er falsk i JavaScript. Og problemet er at JSX gjengir null på skjermen. Andre falske verdier som null, false og undefined blir ikke gjengitt. Dette kan føre til en dårlig brukeropplevelse fordi null alltid vil vises på siden. Noen ganger kan nullen være så liten at du ikke en gang legger merke til den.

Løsningen er å sørge for å bare returnere enten null, undefined eller false. Du gjør dette ved å eksplisitt sjekke null i tilstanden i stedet for å stole på en falsk verdi:

eksportmisligholdefunksjonApp() {
konst array = [1, 2, 3, 4]
komme tilbake (


 {array.length !== 0 && (


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

Nå vil ikke verdien null vises på skjermen selv når matrisen er tom.

3. Klarer ikke å oppdatere staten på riktig måte

Når du oppdaterer tilstanden i en React-komponent, må du gjøre det riktig for å unngå uønskede bivirkninger. De verste feilene er de som ikke gir deg noen feil. De gjør det vanskelig å feilsøke og finne ut hva problemet er. Dårlige tilstandsoppdateringer har en tendens til å ha den effekten.

Denne feilen kommer av at du ikke forstår hvordan du oppdaterer tilstanden når du bruker den eksisterende tilstanden. Tenk for eksempel på følgende kode:

eksportmisligholdefunksjonApp() {
konst [array, setArray] = useState([1, 2, 3])
funksjonaddNumberToStart() {
 array.unshift (tall)
 setArray (array)
 }
funksjonaddNumberToEnd() {
 array.unshift (tall)
 setArray (array)
 }
komme tilbake (
 <>
 {array.join(", ")}


 onClick={() => {
 addNumberToStart(0)
 addNumberToEnd(0)
konsoll.log (matrise)
 }}
 >
 Legg til 0 til start/slutt
 </button>
 </>
 )
}

Hvis du skulle kjøre koden ovenfor, vil du legge merke til at begge funksjonene la til null i starten og slutten av matrisen. Men den har ikke lagt til nullene til matrisen som er skrevet ut på siden. Du kan fortsette å klikke på knappen, men brukergrensesnittet forblir det samme.

Dette er fordi du i begge funksjonene muterer staten din med array.push(). React advarer eksplisitt om at tilstanden må være uforanderlig i React, noe som betyr at du ikke kan endre den i det hele tatt. React bruker referanseverdier med sin tilstand.

Løsningen er å få tilgang til den nåværende tilstanden (currentArray), lage en kopi av den tilstanden og foreta oppdateringene til den kopien:

funksjonaddNumberToStart(Antall) {
 setArray((gjeldendeArray) => {
komme tilbake [nummer, ...currentArray]
 })
}
funksjonaddNumberToStart(Antall) {
 setArray((gjeldendeArray) => {
komme tilbake [...currentArray, number]
 })
}

Dette er den riktige metoden for å oppdatere tilstanden i React. Nå når du klikker på knappen, legger den til null til starten og slutten av matrisen. Men viktigst av alt, oppdateringene vil reflektere på siden umiddelbart.

Andre viktige JavaScript-konsepter for React

Denne artikkelen dekket noen av de vanlige feilene som bør unngås ved koding i React. Alle tre feilene som dekkes her stammer fra manglende forståelse av JavaScript. Fordi React er et JavaScript-rammeverk, trenger du en solid forståelse av JavaScript for å fungere med React. Dette betyr å lære de viktige konseptene som relaterer seg mest til React-utvikling.