CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 15 / 41

Componenti controllati e non controllati in React

Abbiamo appena parlato di componenti controller e componenti view. In React, i componenti controller vengono anche chiamati uncontrolled (non controllati) e i componenti view vengono anche chiamati controlled (controllati). Il collegamento potrebbe confondere un pochino all’inizio, ma dovrebbe aiutare pensare che, se un componente non viene controllato, allora sta controllando un altro componente.
Di conseguenza, un componente non controllato è un componente controller. Allo stesso modo, se un componente non sta controllando allora è controllato, per cui chiamiamo controllati i componenti view.

I componenti controller (non controllati) gestiscono gli stati, di cui inviano il valore ai componenti view (controllati). I componenti view (controllati) notificano i componenti controller (non controllati) dei cambiamenti dello stato.

Potrebbe capitarti di ricevere un avvertimento da React che dice:

 

Un componente sta cambiando un input non controllato per trasformarlo in un input controllato

 

In inglese:

 

A component is changing an uncontrolled input to be controlled

 

Prima di tutto, è importante citare che tutti gli input in React lavorano con le stringhe. Non importa se type è “number” o qualcos’altro che non c’entra niente con le stringhe. Perfino le checkbox usano stringhe, infatti leggiamo il loro attributo checked e non value.

Quando passiamo a input un attributo value che è null o undefined, React pensa che stiamo usando quell’elemento in modo non controllato (cioè come un componente controller). Potrebbe succedere perché ci dimentichiamo di inizializzare uno stato, oppure perché prendiamo un dato dall’esterno, per esempio dalla rete o da LocalStorage o SessionStorage, e ci dimentichiamo di inizializzarlo a stringa vuota. Se il valore che passiamo all’attributo value cambia e diventa una stringa, React si ritrova improvvisamente tra le mani un componente controllato, e lancia l’errore.

Possiamo portare questa regola nei nostri componenti, per essere sempre sicuri che i componenti controller e i componenti view siano sempre correttamente impostati:

  • Se un componente si aspetta una prop di un certo tipo, diamole un valore iniziale dello stesso tipo.
  • Quando passiamo una prop che deriva da uno stato a un componente figlio, passiamo sempre anche un event listener collegato alla funzione setter dello stesso stato.

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.