3 errori di reazione per principianti che possono rovinare la tua app

Come sviluppatore React, sei destinato a commettere alcuni errori durante la codifica con il framework. Alcuni di questi errori sono abbastanza comuni. E a causa della loro natura sottile, potresti trovare difficile identificare questi problemi per eseguire il debug della tua applicazione.

Scopri tre degli errori React più comuni commessi dagli sviluppatori. Puoi commettere questi errori come sviluppatore React principiante, intermedio o avanzato. Ma conoscerli e le loro implicazioni ti aiuterà a evitarli e risolverli.

1. Utilizzo del tipo errato di funzione di richiamata

La gestione degli eventi è una pratica comune in React, tramite La potente funzionalità di ascolto degli eventi di JavaScript. Forse vuoi cambiare il colore di un pulsante quando ci si passa sopra. Forse vuoi inviare i dati del modulo al server al momento dell'invio. In entrambi questi scenari, dovresti passare una funzione di callback all'evento per eseguire la reazione desiderata. È qui che alcuni sviluppatori di React commettono errori.

Si consideri ad esempio il seguente componente:

esportarepredefinitofunzioneApp() {
funzionehandleSubmit(e) {
 e.preventDefault()
consolare.tronco d'albero("Modulo inviato!")
 }
funzionestampa(numero) {
consolare.tronco d'albero("Stampa", numero)
 }
funzioneduplicatore(numero) {
ritorno() => {
consolare.tronco d'albero("Doppio", numero * 2)
 }
 }
ritorno (
 <>
 {/* Il codice andrà qui */}
 </>
 )
}

Qui hai tre funzioni separate. Mentre le prime due funzioni non restituiscono nulla, la terza restituisce un'altra funzione. Devi tenerlo a mente perché sarà la chiave per capire cosa imparerai dopo.

Ora, passando a JSX, iniziamo con il primo e più comune modo in cui passeresti una funzione come gestore di eventi:

<moduloonSubmit={handleSubmit}>
<ingressotipo="testo"nome="testo"valore di default="iniziale"/>
<pulsante>Inviapulsante>
modulo>

Questo esempio passa il nome della funzione all'evento tramite la prop onSubmit in modo che React chiami handleSubmit quando invii il modulo. All'interno di handleSubmit, puoi accedere all'oggetto evento, che ti dà accesso a proprietà come evento.obiettivo.valore e metodi come event.preventDefault().

Il secondo modo per passare una funzione di gestione eventi è chiamarla all'interno della funzione di callback. In sostanza, stai passando a Click una funzione che chiama print() per te:

{[1, 5, 7].carta geografica((numero) => {
ritorno (
 stampa (numero)}>
 Stampa {numero}
 </button>
 )
})}

Questo metodo è utile negli scenari in cui si desidera passare dati locali alla funzione. L'esempio precedente passa ogni numero alla funzione print(). Se hai utilizzato il primo metodo, non saresti in grado di passare argomenti nella funzione.

Il terzo metodo è dove molti sviluppatori commettono molti errori. Ricorda che la funzione doubler restituisce un'altra funzione:

funzioneduplicatore(numero) {
ritorno() => {
consolare.tronco d'albero("Doppio", numero * 2)
 }
}

Ora, se lo hai usato nel JSX in questo modo:

{[1, 5, 7].carta geografica((numero) => {
ritorno (
 duplicatore (numero)}>
 Doppio {numero}
 </button>
 )
})}

In questo caso, la funzione da cui ritorni Doppio() è ciò che viene assegnato a onClick. È essenzialmente come copiare la funzione restituita e incollarla in linea in onClick. Quest'ultimo metodo non ha alcun caso d'uso. La maggior parte delle volte, è meglio aggiungere la funzione come variabile (primo metodo) o chiamare la funzione all'interno di un callback (secondo metodo).

Tutte e tre le tecniche sono valide perché, in tutti i casi, stai passando una funzione all'evento. In React, devi assicurarti di passare una funzione a una proprietà dell'evento. Potrebbe essere una variabile, una funzione codificata (inline) o un oggetto/funzione che restituisce un'altra funzione.

2. Emissione di zero durante un controllo Falsy

Quando tu sei rendering condizionale di un elemento in React, puoi utilizzare un'istruzione if...else o la tecnica del cortocircuito. Il cortocircuito comporta l'uso della doppia e commerciale (&&). Se la condizione prima della e commerciale restituisce true, il browser esegue il codice che segue la e commerciale. In caso contrario, il browser non esegue alcun codice.

Il cortocircuito è la tecnica migliore grazie alla sua sintassi concisa, ma ha un effetto collaterale che molti sviluppatori non notano. Questo errore si verifica perché non si capisce esattamente come funziona JSX con valori falsi.

Considera il seguente codice:

esportarepredefinitofunzioneApp() {
cost matrice = [1, 2, 3, 4]
ritorno (


 {array.lunghezza && (


Vettore articoli:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Finché l'array ha qualcosa al suo interno, React stamperà ogni elemento sulla pagina. Ciò è dovuto al matrice.lunghezza check sta restituendo un valore veritiero. Ma cosa succede se il tuo array è vuoto? Innanzitutto, gli elementi successivi verranno visualizzati sulla pagina, che è quello che ti aspetteresti. Tuttavia, troverai uno strano zero visualizzato sullo schermo.

La ragione è quella matrice.lunghezza restituisce zero. Il valore zero è falso in JavaScript. E il problema è che JSX rende zero sullo schermo. Altri valori falsi come null, false e undefined non vengono visualizzati. Questo può portare a un'esperienza utente negativa perché zero apparirà sempre sulla pagina. A volte lo zero potrebbe essere così piccolo che non te ne accorgi nemmeno.

La soluzione è assicurarsi di restituire solo null, undefined o false. Puoi farlo controllando esplicitamente zero nella condizione invece di fare affidamento su un valore falso:

esportarepredefinitofunzioneApp() {
cost matrice = [1, 2, 3, 4]
ritorno (


 {array.lunghezza !== 0 && (


Vettore articoli:</span> {array.join(", ")}
 </div>
 )}
 </div>
 )
}

Ora il valore zero non verrà visualizzato sullo schermo anche quando l'array è vuoto.

3. Impossibile aggiornare correttamente lo stato

Quando aggiorni lo stato in un componente React, devi farlo correttamente per evitare effetti collaterali indesiderati. Gli errori peggiori sono quelli che non generano errori per te. Rendono difficile eseguire il debug e scoprire qual è il problema. Gli aggiornamenti di cattivo stato tendono ad avere questo effetto.

Questo errore deriva dal non capire come aggiornare lo stato quando si utilizza lo stato esistente. Si consideri ad esempio il seguente codice:

esportarepredefinitofunzioneApp() {
cost [array, setArray] = useState([1, 2, 3])
funzioneaddNumberToStart() {
 array.unshift (numero)
 setArray (array)
 }
funzioneaddNumberToEnd() {
 array.unshift (numero)
 setArray (array)
 }
ritorno (
 <>
 {array.join(", ")}


 al Clic={() => {
 addNumeroInizio(0)
 aggiungiNumeroFine(0)
consolare.log (array)
 }}
 >
 Aggiungere 0 all'inizio/fine
 </button>
 </>
 )
}

Se dovessi eseguire il codice precedente, noterai che entrambe le funzioni hanno aggiunto zero all'inizio e alla fine dell'array. Ma non ha aggiunto gli zeri all'array stampato sulla pagina. Puoi continuare a fare clic sul pulsante, ma l'interfaccia utente rimane la stessa.

Questo perché, in entrambe le funzioni, stai mutando il tuo stato con matrice.push(). React avverte esplicitamente che lo stato deve essere immutabile in React, il che significa che non puoi cambiarlo affatto. React utilizza valori referenziali con il suo stato.

La soluzione è accedere allo stato corrente (currentArray), creare una copia di quello stato e apportare gli aggiornamenti a quella copia:

funzioneaddNumberToStart(numero) {
 setArray((currentArray) => {
ritorno [numero, ...currentArray]
 })
}
funzioneaddNumberToStart(numero) {
 setArray((currentArray) => {
ritorno [...currentArray, numero]
 })
}

Questo è il metodo giusto per aggiornare lo stato in React. Ora quando fai clic sul pulsante, aggiunge zero all'inizio e alla fine dell'array. Ma soprattutto, gli aggiornamenti si rifletteranno immediatamente sulla pagina.

Altri importanti concetti JavaScript per React

Questo articolo ha coperto alcuni degli errori comuni da evitare durante la codifica in React. Tutti e tre gli errori trattati qui derivano da un'incapacità di comprendere correttamente JavaScript. Poiché React è un framework JavaScript, avrai bisogno di una solida conoscenza di JavaScript per lavorare con React. Ciò significa apprendere i concetti importanti che riguardano maggiormente lo sviluppo di React.