Lo stato interno di un component è una delle funzionalità più importanti da gestire quando si crea un'applicazione. Per stato intendiamo un oggetto che contiene tutti i dati del component. Per fare un esempio, se un component visualizza una tabella, il suo stato sarà composto dagli oggetti che compongono le righe della tabella. Se mostriamo il dettaglio di un prodotto, lo stato del component sarà il prodotto.
In ReactJS, lo stato di un component è contenuto nella proprietà state. È fondamentale tenere a mente che lo stato è immutabile. Nnon dobbiamo mai modificarne le proprietà bensì creare ogni volta un nuovo oggetto. Per fare un esempio, se abbiamo come stato un oggetto Person con proprietà FirstName e LastName, per cambiare il valore della proprietà
FirstName non dobbiamo recuperare lo stato e modificare il valore della proprietà, bensi creare un nuovo oggetto Person, impostare la proprietà FirstName al nuovo valore, e passare il nuovo oggetto allo stato tramite il metodo setState.
Quando creiamo un component sfruttando una classe, il punto in cui impostiamo il valore iniziale dello stato è all'interno del costruttore. Lo stato iniziale lo impostiamo valorizzando direttamente la proprietà state mentre tutte le successive modifiche vanno apportate col metodo setState.
import React from 'react'; class component extends React.Component { constructor() { this.state = { FirstName: 'Stefano', LastName: 'Mostarda' }; } changeFirstName() { this.setState({ FirstName: 'newName' }); } render { return ( <> <div>{this.state.FirstName}</div> <button onClick={this.changeFirstName.bind(this)}>Change FirstName</button> </> ); } }
In questo caso, il metodo setState accetta in input un oggetto con la sola proprietà FirstName. Questo significa che solo questa proprietà viene modificata, le altre proprietà dello stato non vengono eliminate, bensì rimangono inalterate.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Supportare la crittografia di ASP.NET Core con Azure Container App
.NET Aspire per applicazioni distribuite
Eliminare una project wiki di Azure DevOps
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Recuperare gli audit log in Azure DevOps
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Utilizzare Intersect e Except per filtrare set di dati in TSql
Creare una libreria CSS universale - Rotazione degli elementi
Creare una libreria CSS universale: Nav menu
I più letti di oggi
- Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
- .NET Conference Italia 2025 - Milano
- The Agentic Day - Milano
- Assengare l'ID ai controlli in maniera automatica
- Gestione ciclo di vita in .NET Aspire
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Gestione CSS in Blazor con .NET 9