Kaikilla React-komponenteilla voi olla a osavaltio niihin liittyvät. Komponentin tila voi muuttua joko vastauksen käyttäjän suorittamaan toimintoon tai järjestelmän laukaiseman tapahtuman vuoksi. Aina kun tila muuttuu, React renderöi komponentin uudelleen selaimeen. Ennen tilan arvon päivittämistä meidän on rakennettava alkutila-asetus. Kun olemme tehneet sen, käytämme setState()-metodi muuttaaksesi tilaobjektia. Se varmistaa, että komponentti on päivitetty, ja vaatii komponentin uudelleenrenderöimistä.

Sisällysluettelo

• Reagoi JS setState
• React-sovelluksen luomisen vaiheet:
• Päivitetään useita määritteitä
• Tila-arvojen päivittäminen rekvisiittajen avulla.
• Päivitetään tila käyttämällä sen aikaisempaa arvoa.

Reagoi JS setState

setState on asynkroninen puhelu tarkoittaa, että jos synkronista puhelua kutsutaan, se ei välttämättä päivity oikeaan aikaan. Haluaisin tietää objektin nykyisen arvon setStatea käyttävän päivityksen jälkeen, se ei välttämättä anna nykyistä päivitettyä arvoa konsolissa. Synkronisen käyttäytymisen saamiseksi on välitettävä funktio objektin sijaan setState.

Syntaksi:

Voimme käyttää setState() muuttaaksesi komponentin tilaa suoraan sekä nuolifunktion kautta.

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

React-sovelluksen luomisen vaiheet:

Vaihe 1: Luo React-sovellus seuraavalla komennolla:

cast sql

npx create-react-app foldername>

Vaihe 2: Kun olet luonut projektikansiosi eli kansion nimen, siirry siihen seuraavalla komennolla:

cd foldername>

Hankkeen rakenne:

Lähestymistapa 1: Päivitetään yhtä attribuuttia

Asetamme alkutilan arvomme sisään rakentajatoiminto ja luo toinen toiminto updateState() tilan päivittämistä varten. Nyt kun napsautamme painiketta, jälkimmäinen laukeaa an onClick-tapahtuma joka muuttaa tilan arvoa. Suoritamme setState()-menetelmän meidän updateState()-funktio kirjoittamalla:

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

Kuten näet, välitämme objektin setState()-funktiolle. Tämä objekti sisältää sen osan tilasta, jonka haluamme päivittää ja joka tässä tapauksessa on arvo tervehdys . React ottaa tämän arvon ja yhdistää sen sitä tarvitsevaan objektiin. Se on aivan kuin painikekomponentti kysyy, mitä sen tulisi käyttää tervehdysarvon päivittämiseen, ja setState() vastaa vastauksella.

Javascript

> 
    
     Sovelluksen suorittamisen vaihe:    Suorita sovellus seuraavalla komennolla projektin juurihakemistosta:
 
npm start>
 
    Lähtö:    Avaa nyt selain ja siirry kohtaan      http://localhost:3000/      , näet seuraavan tulosteen:
 
 
javascript-kutsutoiminto html:stä
 
    Lähestymistapa 2:    Päivitetään useita määritteitä
 
Komponentin tilaobjekti voi sisältää useita attribuutteja, ja React sallii setState()-funktion avulla päivittää vain osajoukon näistä määritteistä sekä useiden setState()-menetelmien päivittämiseen kunkin attribuutin arvon itsenäisesti.
 
Asetamme alkutilan alustamalla kolme erilaista attribuuttia ja luomme sitten funktion    updateState()    joka päivittää arvonsa aina kun sitä kutsutaan. Jälleen kerran tämä toiminto laukeaa an     onClick-tapahtuma     ja saamme samanaikaisesti päivitetyt arvot osavaltioistamme.
 
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> >>
{>this>.state.test}>
 >>
{>this>.state.questions}>
 >>
{>this>.state.students}>
 >{>/* Set click handler */>}> > this.updateState}>Klikkaa minua!       );  } } vie oletussovellus;>>
 
 
 
 
    
 
> 
    
     Sovelluksen suorittamisen vaihe:    Suorita sovellus seuraavalla komennolla projektin juurihakemistosta:
 
npm start>
 
    Lähtö:    Avaa nyt selain ja siirry kohtaan      http://localhost:3000/      , näet seuraavan tulosteen:
 
 
 
    Lähestymistapa 3:    Tila-arvojen päivittäminen rekvisiittajen avulla.
 
Asetimme joukon merkkijonoja    testiaiheet    komponenttimme rekvisiittana. Toiminto    lista aiheista    on luotu kartoittamaan kaikki merkkijonot osavaltiomme luettelokohteiksi    aiheita    . Toiminto    päivitystila    käynnistyy ja asettaa aiheet luetteloon. Kun napsautamme painiketta, saamme päivitetyt tila-arvot. Tämä menetelmä tunnetaan hyvin monimutkaisen tiedon käsittelystä ja tilan päivittämisestä erittäin helposti.
susi tai kettu
 
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> >>
{>this>.state.testName}>
 >>
{>this>.state.topics}>
 >{>/* Set click handler */>}> > this.updateState}>Klikkaa minua!       );  } } vie oletussovellus;>>
 
 
 
 
    
 
> 
    
     Sovelluksen suorittamisen vaihe:    Suorita sovellus seuraavalla komennolla projektin juurihakemistosta:
10 potenssiin 6
 
npm start>
 
    Lähtö:    Avaa nyt selain ja siirry kohtaan      http://localhost:3000/      , näet seuraavan tulosteen:
 
 
 
    Lähestymistapa 4:    Päivitetään tila käyttämällä sen aikaisempaa arvoa.
 
Luomme alkutilan    Kreivi    jonka arvo on 0. Funktio    updateState()    lisää tilan nykyarvoa yhdellä aina kun sitä kutsutaan. Tällä kertaa käytämme setState()-metodia nuolifunktiossa ohittamalla    prevState    parametrina. Tilan nykyiseen arvoon päästään käyttämällä    prevState.stateName    joka kasvaa 1:llä aina, kun painamme painiketta. Tämä menetelmä on todella hyödyllinen, kun asetamme arvoa tilaan siten, että se riippuu sen aikaisemmasta arvosta.    Esimerkiksi    , vaihtaa totuusarvoa (tosi/epätosi) tai lisää/vähentää lukua.
 
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}>Klikkaa minua!       );  } } vie oletussovellus;>>
 
 
 
 
    
 
> 
    
     Sovelluksen suorittamisen vaihe:    Suorita sovellus seuraavalla komennolla projektin juurihakemistosta:
merkkijono json-objektiin
 
npm start>
 
    Lähtö:    Avaa nyt selain ja siirry kohtaan      http://localhost:3000/      , näet seuraavan tulosteen: