Stato indipendente
Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 26 di 42.
Devi ricordare due cose? Chiama useState due volte. Ogni chiamata crea un elemento di stato completamente indipendente:
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);Aggiornare cats causa un nuovo rendering del componente, ma dogs mantiene invariato il proprio valore. Ogni stato ha il proprio setter e confonderli è l’errore più comune tra i principianti: setCats(dogs + 1) viene compilato senza problemi, ma è comunque sbagliato.
Sfida
MedioGestisci il tabellone degli ingressi del rifugio: due contatori che non interferiscono tra loro.
- Aggiungi due stati,
catsedogs, entrambi con valore iniziale 0. - Visualizzali in
id="cats"eid="dogs". - Il pulsante
id="add-cat"aggiunge un gatto;id="add-dog"aggiunge un cane.
Provalo tu
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Alla scoperta di React
Che cos’è React?Il tuo primo componenteLa regola dell’unico elemento genitoreJSX non è HTMLRiepilogo: alla scoperta di React2Espressioni JSX
Le parentesi graffeOperazioni matematiche tra parentesi graffeParentesi graffe negli attributiChiamare funzioni in JSXRiepilogo: espressioni JSX5Stato ed eventi
Che cos'è lo stato?Contatore di clicContare a incrementiAttiva/disattiva con lo statoStato indipendenteRiepilogo: stato ed eventi