Vse komponente React imajo lahko a država povezanih z njimi. Stanje komponente se lahko spremeni bodisi zaradi odziva na dejanje, ki ga izvede uporabnik, bodisi zaradi dogodka, ki ga sproži sistem. Kadarkoli se stanje spremeni, React ponovno upodobi komponento v brskalnik. Preden posodobimo vrednost stanja, moramo zgraditi začetno nastavitev stanja. Ko končamo z njim, uporabimo metoda setState(). da spremenite objekt stanja. Zagotavlja, da je bila komponenta posodobljena, in zahteva ponovno upodobitev komponente.
Kazalo
- React JS setState
- Koraki za ustvarjanje aplikacije React:
- Posodabljanje več atributov
- Posodabljanje vrednosti stanja z uporabo rekvizitov.
- Posodobitev stanja z uporabo prejšnje vrednosti.
React JS setState
setState je asinhroni klic, kar pomeni, da če se kliče sinhroni klic, morda ne bo posodobljen ob pravem času, kot če bi izvedel trenutno vrednost predmeta po posodobitvi z uporabo setState, morda ne bo dal trenutne posodobljene vrednosti na konzoli. Če želite doseči neko sinhrono vedenje, morate namesto predmeta posredovati funkcijo setState.
Sintaksa:
SetState() lahko uporabimo za neposredno spreminjanje stanja komponente, pa tudi s puščično funkcijo.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Koraki za ustvarjanje aplikacije React:
Korak 1: Ustvarite aplikacijo React z naslednjim ukazom:
obrezovanje nizov javascript
npx create-react-app foldername>
2. korak: Ko ustvarite mapo projekta, tj. ime mape, se premaknite vanjo z naslednjim ukazom:
cd foldername>
Struktura projekta:
Pristop 1: Posodabljanje posameznega atributa
V notranjosti nastavimo vrednost začetnega stanja funkcija konstruktorja in ustvarite drugo funkcijo updateState() za posodobitev stanja. Zdaj, ko kliknemo na gumb, se slednji sproži kot dogodek onClick ki spremeni vrednost stanja. Izvajamo metodo setState() v našem funkcijo updateState(). s pisanjem:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Kot lahko vidite, posredujemo objekt v setState(). Ta objekt vsebuje del stanja, ki ga želimo posodobiti in je v tem primeru vrednost pozdrav . React vzame to vrednost in jo združi v objekt, ki jo potrebuje. Tako kot komponenta gumba vpraša, kaj naj uporabi za posodobitev vrednosti pozdrava, in setState() odgovori z odgovorom.
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}>Kliknite me! ); } } izvoz privzete aplikacije;> |
>
>
Korak za zagon aplikacije: Zaženite aplikacijo z naslednjim ukazom iz korenskega imenika projekta:
npm start>
Izhod: Zdaj odprite brskalnik in pojdite na http://localhost:3000/ , boste videli naslednji rezultat:
primeri avtomatov dfa
Pristop 2: Posodabljanje več atributov
Objekt stanja komponente lahko vsebuje več atributov in React omogoča uporabo funkcije setState() za posodobitev samo podnabora teh atributov, kot tudi uporabo več metod setState() za neodvisno posodobitev vsake vrednosti atributa.
Začetno stanje nastavimo tako, da inicializiramo tri različne atribute, nato pa ustvarimo funkcijo updateState() ki posodobi svojo vrednost vsakič, ko je poklican. Ponovno se ta funkcija sproži kot dogodek onClick in hkrati dobimo posodobljene vrednosti naših stanj.
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}>Kliknite me! ); } } izvoz privzete aplikacije;> |
>
>
Korak za zagon aplikacije: Zaženite aplikacijo z naslednjim ukazom iz korenskega imenika projekta:
npm start>
Izhod: Zdaj odprite brskalnik in pojdite na http://localhost:3000/ , boste videli naslednji rezultat:
Pristop 3: Posodabljanje vrednosti stanja z uporabo rekvizitov.
Postavili smo niz nizov testTopics kot rekviziti za našo komponento. Funkcija listOfTopics je ustvarjen za preslikavo vseh nizov kot elementov seznama v našem stanju teme . Funkcija updateState se sproži in nastavi teme na elemente seznama. Ko kliknemo na gumb, dobimo posodobljene vrednosti stanja. Ta metoda je znana po tem, da zelo enostavno obravnava kompleksne podatke in posodablja stanje.
binarno drevo proti bst
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> >>
>>
>{>/* Set click handler */>}> > this.updateState}>Kliknite me! ); } } izvoz privzete aplikacije;> |
>
>
Korak za zagon aplikacije: Zaženite aplikacijo z naslednjim ukazom iz korenskega imenika projekta:
za zanko java
npm start>
Izhod: Zdaj odprite brskalnik in pojdite na http://localhost:3000/ , boste videli naslednji rezultat:
Pristop 4: Posodobitev stanja z uporabo prejšnje vrednosti.
Ustvarimo začetno stanje štetje ki ima vrednost 0. Funkcija updateState() poveča sedanjo vrednost stanja za 1, kadar koli je priklicana. Tokrat uporabimo metodo setState() v puščični funkciji s podajanjem prevState kot parameter. Do trenutne vrednosti stanja dostopate z prevState.stateName ki se poveča za 1 vsakič, ko pritisnemo gumb. Ta metoda je zelo uporabna, ko nastavimo vrednost v stanju tako, da je odvisna od prejšnje vrednosti. Na primer , preklapljanje logične vrednosti (true/false) ali povečanje/zmanjšanje števila.
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}>Kliknite me! ); } } izvoz privzete aplikacije;> |
>
>
Korak za zagon aplikacije: Zaženite aplikacijo z naslednjim ukazom iz korenskega imenika projekta:
skrajšati in izbrisati razliko
npm start>
Izhod: Zdaj odprite brskalnik in pojdite na http://localhost:3000/ , boste videli naslednji rezultat:
