Tutti i componenti di React possono avere un file stato ad essi associati. Lo stato di un componente può cambiare a causa di una risposta a un'azione eseguita dall'utente o di un evento attivato dal sistema. Ogni volta che lo stato cambia, React esegue nuovamente il rendering del componente nel browser. Prima di aggiornare il valore dello stato, dobbiamo creare un'impostazione iniziale dello stato. Una volta terminato, utilizziamo il file metodo setState() per modificare lo stato dell'oggetto. Garantisce che il componente sia stato aggiornato e richiede il nuovo rendering del componente.
Tabella dei contenuti
- Reagisci JS setState
- Passaggi per creare un'applicazione React:
- Aggiornamento di più attributi
- Aggiornamento dei valori di stato utilizzando oggetti di scena.
- Aggiornamento dello stato utilizzando il suo valore precedente.
Reagisci JS setState
setState è una chiamata asincrona significa che se viene chiamata una chiamata sincrona potrebbe non essere aggiornata al momento giusto, ad esempio conoscere il valore corrente di un oggetto dopo un aggiornamento utilizzando setState potrebbe non fornire il valore aggiornato corrente sulla console. Per ottenere un comportamento sincrono è necessario passare la funzione anziché l'oggetto a setState.
Sintassi:
Possiamo usare setState() per modificare lo stato del componente direttamente o tramite una funzione freccia.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ nomestato: prevState.nomestato + 1 }))> Passaggi per creare un'applicazione React:
Passo 1: Crea un'applicazione React utilizzando il seguente comando:
cos'è l'uri?
npx create-react-app foldername>
Passo 2: Dopo aver creato la cartella del progetto, ovvero il nomecartella, spostati su di essa utilizzando il seguente comando:
cd foldername>
Struttura del progetto:
Approccio 1: Aggiornamento del singolo attributo
Impostiamo il nostro valore dello stato iniziale all'interno funzione costruttore e creare un'altra funzione aggiornamentoStato() per l'aggiornamento dello stato. Ora quando facciamo clic sul pulsante, quest'ultimo viene attivato come file evento onClick che cambia il valore dello stato. Eseguiamo il metodo setState() nel nostro funzione updateState() scrivendo:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Come puoi vedere, stiamo passando un oggetto a setState(). Questo oggetto contiene la parte dello stato che vogliamo aggiornare che, in questo caso, è il valore saluto . React prende questo valore e lo fonde nell'oggetto che ne ha bisogno. È proprio come se il componente pulsante chiedesse cosa dovrebbe usare per aggiornare il valore di saluto e setState() risponde con una risposta.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >greeting:> >'Click the button to receive greetings'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >greeting:>'GeeksForGeeks welcomes you !!'>,> >});> >}> >render() {> >return> (> >> >Greetings Portal> >>
>{>/* Set click handler */>}> > this.updateState}>Cliccami! ); } } esporta l'app predefinita;> |
come convertire una stringa in intero
>
>
Passaggio per eseguire l'applicazione: Esegui l'applicazione utilizzando il seguente comando dalla directory principale del progetto:
npm start>
Produzione: Ora apri il browser e vai su http://localhost:3000/ , vedrai il seguente output:
Approccio 2: Aggiornamento di più attributi
L'oggetto stato di un componente può contenere più attributi e React consente di utilizzare la funzione setState() per aggiornare solo un sottoinsieme di tali attributi, nonché di utilizzare più metodi setState() per aggiornare ciascun valore di attributo in modo indipendente.
Impostiamo il nostro stato iniziale inizializzando tre diversi attributi e quindi creiamo una funzione aggiornamentoStato() che aggiorna il suo valore ogni volta che viene chiamato. Ancora una volta questa funzione viene attivata come file evento onClick e contemporaneamente otteniamo i valori aggiornati dei nostri stati.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >test:>'Nil'>,> >questions:>'0'>,> >students:>'0'>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState({> >test:>'Programming Quiz'>,> >questions:>'10'>,> >students:>'30'>,> >});> >}> >render() {> >return> (> >> >Test Portal> >>
>>
>>
>{>/* Set click handler */>}> > this.updateState}>Cliccami! ); } } esporta l'app predefinita;> |
>
>
Passaggio per eseguire l'applicazione: Esegui l'applicazione utilizzando il seguente comando dalla directory principale del progetto:
npm start>
Produzione: Ora apri il browser e vai su http://localhost:3000/ , vedrai il seguente output:
Approccio 3: Aggiornamento dei valori di stato utilizzando oggetti di scena.
Impostiamo un array di stringhe testArgomenti come oggetti di scena per il nostro componente. Una funzione elenco degli argomenti viene creato per mappare tutte le stringhe come elementi di elenco nel nostro stato temi . La funzione updateState viene attivato e imposta gli argomenti per elencare gli elementi. Quando facciamo clic sul pulsante, otteniamo valori di stato aggiornati. Questo metodo è noto per la gestione di dati complessi e l'aggiornamento dello stato molto facilmente.
stringa e sottostringa
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >static defaultProps = {> >testTopics: [> >'React JS'>,> >'Node JS'>,> >'Compound components'>,> >'Lifecycle Methods'>,> >'Event Handlers'>,> >'Router'>,> >'React Hooks'>,> >'Redux'>,> >'Context'>,> >],> >};> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >testName:>'React js Test'>,> >topics:>''>,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >listOfTopics() {> >return> (> >>> >{>this>.props.testTopics.map((topic) =>(> >{topic}> >))}> >>>);> >}> >updateState() {> >// Changing state> >this>.setState({> >testName:>'Test topics are:'>,> >topics:>this>.listOfTopics(),> >});> >}> >render() {> >return> (> >> >Test Information> >>
>>
come convertire int in stringa >{>/* Set click handler */>}> > this.updateState}>Cliccami! ); } } esporta l'app predefinita;> |
>
>
Passaggio per eseguire l'applicazione: Esegui l'applicazione utilizzando il seguente comando dalla directory root del progetto:
npm start>
Produzione: Ora apri il browser e vai su http://localhost:3000/ , vedrai il seguente output:
Approccio 4: Aggiornamento dello stato utilizzando il suo valore precedente.
Creiamo uno stato iniziale contare avente un valore pari a 0. La funzione aggiornamentoStato() incrementa il valore attuale dello stato di 1 ogni volta che viene chiamato. Questa volta utilizziamo il metodo setState() in una funzione freccia passando prevState come parametro. Si accede al valore attuale dello stato con prevState.stateName che viene incrementato di 1 ogni volta che si preme il pulsante. Questo metodo è davvero utile quando impostiamo un valore nello stato in modo tale che dipenda dal suo valore precedente. Per esempio , alternando un valore booleano (vero/falso) o incrementando/diminuendo un numero.
Javascript
// Filename - App.js> import React, { Component } from>'react'>;> class App extends Component {> >constructor(props) {> >super>(props);> >// Set initial state> >this>.state = {> >count: 0,> >};> >// Binding this keyword> >this>.updateState =>this>.updateState.bind(>this>);> >}> >updateState() {> >// Changing state> >this>.setState((prevState) =>{> >return> { count: prevState.count + 1 };> >});> >}> >render() {> >return> (> >> >Click Counter> >>
>{>/* Set click handler */>}> > this.updateState}>Cliccami! ); } } esporta l'app predefinita;> |
>
aggiornando java
>
Passaggio per eseguire l'applicazione: Esegui l'applicazione utilizzando il seguente comando dalla directory principale del progetto:
npm start>
Produzione: Ora apri il browser e vai su http://localhost:3000/ , vedrai il seguente output:
