Quando creiamo un function component, non abbiamo a disposizione costruttori o altri metodi per inizializzare lo stato quindi dobbiamo utilizzare un'altra tecnica: gli hook. Nel caso specifico, il metodo useState è l'hook da utilizzare. Questo metodo accetta in input un valore che rappresenta il valore iniziale da dare a una variabile dello stato e resituisce in output un oggetto con una variabile che rappresenta lo stato e un metodo da invocare per modificare la variabile nello stato.
import React, { useState } from 'react'; function MyComponent() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); } return ( <div> <p>Counter: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }
In questo esempio, importiamo il metodo useState da react e poi lo usiamo per inizializzare una variabile nello stato con valore zero. La chiamata al metodo torna un oggetto che tramite deconstruction riportiamo a delle variabili. La variabile count contiene il valore e viene aggiornata ogni volta che modifichiamo il suo valore tramite il metodo setCount.
Ovviamente, andando a modificare il valore dello stato, ogni chiamata a setCount causa il rendering del component.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Eseguire operazioni con timeout in React
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Creare un'applicazione React e configurare Tailwind CSS
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Utilizzare ChatGPT con Azure OpenAI
Utilizzare i primary constructor in C#
Effettuare il pull di git LFS in un workflow di GitHub
Utilizzare la libreria Benchmark.NET per misurare le performance
Utilizzare Tailwind CSS all'interno di React: installazione
Gestire errori funzionali tramite exception in ASP.NET Core Web API
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10