3 errori di reazione da principiante che possono rovinare la tua app
React è un framework popolare facile da imparare, ma è comunque facile commettere errori se non stai attento.
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 subdola, potresti avere difficoltà a 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 React commettono errori.
Consideriamo ad esempio il seguente componente:
export default function App() {
function handleSubmit(e) {
e.preventDefault()
console.log("Form submitted!")
}
function print(number) {
console.log("Print", number)
}
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}
return (
<>
{/* Code will go here */}
</>
)
}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à fondamentale per capire cosa imparerai dopo.
Ora, passando a JSX, iniziamo con il primo e più comune modo di passare una funzione come gestore di eventi:
<form onSubmit={handleSubmit}>
<input type="text" name="text" defaultValue="initial"/>
<button>Submit</button>
</form>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 event.target.value e metodi come event.preventDefault().
Il secondo modo per passare una funzione del gestore eventi è chiamarla all'interno della funzione di callback. In sostanza, stai trasmettendo a onClick una funzione che chiama print() per te:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => print(number)}>
Print {number}
</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 utilizzassi il primo metodo, non saresti in grado di passare argomenti alla funzione.
Il terzo metodo è quello in cui molti sviluppatori commettono molti errori. Ricordiamo che la funzione duplicatore restituisce un'altra funzione:
function doubler(number) {
return () => {
console.log("Double", number * 2)
}
}Ora, se lo hai usato in JSX in questo modo:
{[1, 5, 7].map((number) => {
return (
<button key={number} onClick={() => doubler(number)}>
Double {number}
</button>
)
})}In questo caso, la funzione restituita da double() è quella che viene assegnata a onClick. È essenzialmente come copiare la funzione restituita e incollarla in linea in onClick. Quest'ultimo metodo non ha alcun caso d'uso. Nella maggior parte dei casi, è 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 hardcoded (inline) o un oggetto/funzione che restituisce un'altra funzione.
2. Emissione di zero durante un controllo falso
Quando esegui il rendering condizionale di un elemento in React, puoi utilizzare un'istruzione if...else o la tecnica del cortocircuito. Il cortocircuito implica l'uso della doppia e commerciale (&&). Se la condizione prima della e commerciale risulta vera, 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 comporta un effetto collaterale che molti sviluppatori non riescono a notare. Questo errore si verifica perché non si capisce esattamente come funziona JSX con valori falsi.
Considera il seguente codice:
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length && (
<div>
<span>Array items:</span> {array.join(", ")}
</div>
)}
</div>
)
}Finché l'array contiene qualcosa al suo interno, React stamperà ogni elemento sulla pagina. Ciò è dovuto al fatto che il controllo array.length restituisce un valore di verità. Ma cosa succede se il tuo array è vuoto? Innanzitutto, gli elementi successivi verranno visualizzati nella pagina, che è ciò che ti aspetteresti. Tuttavia, potresti trovare uno strano zero visualizzato sullo schermo.
Il motivo è che array.length restituisce zero. Il valore zero è falso in JavaScript. E il problema è che JSX rende zero sullo schermo. Altri valori false come null, false e undefine non vengono visualizzati. Ciò può portare a un'esperienza utente negativa perché nella pagina verrà sempre visualizzato zero. A volte lo zero potrebbe essere così piccolo che non te ne accorgi nemmeno.
La soluzione è assicurarsi di restituire solo null, unfined o false. Puoi farlo controllando esplicitamente zero nella condizione invece di fare affidamento su un valore false:
export default function App() {
const array = [1, 2, 3, 4]
return (
<div>
{array.length !== 0 && (
<div>
<span>Array items:</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 ti generano alcun errore. Rendono difficile il debug e la scoperta del problema. Gli aggiornamenti sullo stato scadenti tendono ad avere questo effetto.
Questo errore deriva dal non capire come aggiornare lo stato quando si utilizza lo stato esistente. Consideriamo ad esempio il seguente codice:
export default function App() {
const [array, setArray] = useState([1, 2, 3])
function addNumberToStart() {
array.unshift(number)
setArray(array)
}
function addNumberToEnd() {
array.unshift(number)
setArray(array)
}
return (
<>
{array.join(", ")}
<br />
<button
onClick={() => {
addNumberToStart(0)
addNumberToEnd(0)
console.log(array)
}}
>
Add 0 to Start/End
</button>
</>
)
}Se dovessi eseguire il codice sopra, noterai che entrambe le funzioni aggiungono 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 modificando il tuo stato con array.push(). React avverte esplicitamente che lo stato deve essere immutabile in React, il che significa che non puoi cambiarlo affatto. React utilizza valori di riferimento con il suo stato.
La soluzione è accedere allo stato corrente (currentArray), creare una copia di quello stato e apportare gli aggiornamenti a quella copia:
function addNumberToStart(number) {
setArray((currentArray) => {
return [number, ...currentArray]
})
}
function addNumberToStart(number) {
setArray((currentArray) => {
return [...currentArray, number]
})
}Questo è il metodo giusto per aggiornare lo stato in React. Ora quando fai clic sul pulsante, viene aggiunto 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 trattato alcuni degli errori più comuni da evitare durante la codifica in React. Tutti e tre gli errori qui trattati derivano dall'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.