Tots els components de React poden tenir a estat associats a ells. L'estat d'un component pot canviar a causa d'una resposta a una acció realitzada per l'usuari o a causa d'un esdeveniment activat pel sistema. Quan l'estat canvia, React torna a renderitzar el component al navegador. Abans d'actualitzar el valor de l'estat, hem de crear una configuració d'estat inicial. Un cop acabem amb ell, fem servir el mètode setState(). per canviar l'objecte d'estat. Assegura que el component s'ha actualitzat i demana que es torni a representar.

Taula de contingut

• Reacciona JS setState
• Passos per crear l'aplicació React:
• Actualització de múltiples atributs
• Actualització dels valors d'estat mitjançant accessoris.
• Actualització de l'estat utilitzant el seu valor anterior.

Reacciona JS setState

setState és una trucada asíncrona significa que si es crida una trucada síncrona, és possible que no s'actualitzi en el moment adequat, com per saber el valor actual d'un objecte després d'una actualització mitjançant setState, és possible que no doni el valor actualitzat a la consola. Per obtenir un comportament sincrònic, cal passar la funció en lloc de l'objecte a setState.

Sintaxi:

Podem utilitzar setState() per canviar l'estat del component directament així com mitjançant una funció de fletxa.

setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))>

Passos per crear l'aplicació React:

Pas 1: Creeu una aplicació React amb l'ordre següent:

js onload

npx create-react-app foldername>

Pas 2: Després de crear la carpeta del projecte, és a dir, el nom de la carpeta, aneu-hi amb l'ordre següent:

cd foldername>

Estructura del projecte:

Enfocament 1: S'està actualitzant un únic atribut

Configurem el nostre valor d'estat inicial a l'interior funció de constructor i crear una altra funció updateState() per actualitzar l'estat. Ara, quan fem clic al botó, aquest últim s'activa com a Esdeveniment onClick que modifica el valor de l'estat. Realitzem el mètode setState() al nostre Funció updateState(). escrivint:

this.setState({greeting : 'GeeksForGeeks welcomes you !!'})>

Com podeu veure, estem passant un objecte a setState(). Aquest objecte conté la part de l'estat que volem actualitzar que, en aquest cas, és el valor salutació . React pren aquest valor i el fusiona amb l'objecte que el necessita. És com si el component del botó demanés què hauria d'utilitzar per actualitzar el valor de salutació i setState() respon amb una resposta.

Javascript

> 
    
     Pas per executar l'aplicació:    Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte:
 
npm start>
 
    Sortida:    Ara obriu el vostre navegador i aneu a      http://localhost:3000/      , veureu la sortida següent:
 
 
 
    Enfocament 2:    Actualització de múltiples atributs
 
L'objecte d'estat d'un component pot contenir diversos atributs i React permet utilitzar la funció setState() per actualitzar només un subconjunt d'aquests atributs, així com utilitzar diversos mètodes setState() per actualitzar cada valor d'atribut de manera independent.
 
Establem el nostre estat inicial inicialitzant tres atributs diferents i després creem una funció    updateState()    que actualitza el seu valor sempre que es crida. Una vegada més, aquesta funció s'activa com a     Esdeveniment onClick     i al mateix temps obtenim els valors actualitzats dels nostres estats.
 
Javascript
 
    
 
     
  
convertir la cadena en data
 
    
 
     
     
    
 
 
 
 
 
 // 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> >>
{>this>.state.test}>
 >>
{>this>.state.questions}>
 >>
{>this>.state.students}>
 >{>/* Set click handler */>}> > this.updateState}>Feu clic a mi!       );  } } exporta l'aplicació predeterminada;>>>
 
 
 
 
    
 
> 
    
     Pas per executar l'aplicació:    Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte:
 
npm start>
 
    Sortida:    Ara obriu el vostre navegador i aneu a      http://localhost:3000/      , veureu la sortida següent:
 
 
 
    Enfocament 3:    Actualització dels valors d'estat mitjançant accessoris.
 
Hem configurat una matriu de cadenes    testTemes    com a accessoris per al nostre component. Una funció    llista de temes    es crea per mapar totes les cadenes com a elements de llista al nostre estat    temes    . La funció    updateState    s'activa i estableix els temes per llistar elements. Quan fem clic al botó, obtenim valors d'estat actualitzats. Aquest mètode és conegut per manejar dades complexes i actualitzar l'estat amb molta facilitat.
arbre binari vs bst
 
Javascript
 
    
 
     
  
 
    
pyspark
 
     
     
    
 
 
 
 
 
 // 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> >>
{>this>.state.testName}>
 >>
{>this>.state.topics}>
 >{>/* Set click handler */>}> > this.updateState}>Feu clic a mi!       );  } } exporta l'aplicació predeterminada;>>>
 
 
 
 
    
 
> 
    
     Pas per executar l'aplicació:    Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte:
 
npm start>
 
    Sortida:    Ara obriu el vostre navegador i aneu a      http://localhost:3000/      , veureu la sortida següent:
 
 
 
    Enfocament 4:    Actualització de l'estat utilitzant el seu valor anterior.
 
Creem un estat inicial    comptar    que té un valor de 0. La funció    updateState()    augmenta el valor actual de l'estat en 1 sempre que es crida. Aquesta vegada fem servir el mètode setState() en una funció de fletxa passant    prevState    com a paràmetre. S'accedeix al valor actual de l'estat amb    prevState.stateName    que s'incrementa en 1 cada vegada que premem el botó. Aquest mètode és realment útil quan estem establint un valor a l'estat de tal manera que depèn del seu valor anterior.    Per exemple    , alternant un booleà (vertader/fals) o augmentant/disminuint un nombre.
 
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> >>
> >You have clicked me {>this>.state.count}{>' '>}> >times.> >>
 >{>/* Set click handler */>}> > this.updateState}>Feu clic a mi!       );  } } exporta l'aplicació predeterminada;>>>
 
 
 
 
cadena java a json
    
 
> 
    
     Pas per executar l'aplicació:    Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte:
 
npm start>
 
    Sortida:    Ara obriu el vostre navegador i aneu a      http://localhost:3000/      , veureu la sortida següent: