Visām React sastāvdaļām var būt a Valsts saistīti ar tiem. Komponenta stāvoklis var mainīties vai nu reakcijas uz lietotāja veiktu darbību vai sistēmas izraisīta notikuma dēļ. Ikreiz, kad mainās stāvoklis, React atkārtoti atveido komponentu pārlūkprogrammā. Pirms stāvokļa vērtības atjaunināšanas mums ir jāizveido sākotnējā stāvokļa iestatījums. Kad esam to pabeiguši, mēs izmantojam setState() metode mainīt valsts objektu. Tas nodrošina, ka komponents ir atjaunināts, un pieprasa komponenta atkārtotu renderēšanu.

Satura rādītājs

• Reaģējiet uz JS setState
• Darbības, lai izveidotu React lietojumprogrammu:
• Vairāku atribūtu atjaunināšana
• Stāvokļa vērtību atjaunināšana, izmantojot rekvizītus.
• Notiek stāvokļa atjaunināšana, izmantojot tā iepriekšējo vērtību.

Reaģējiet uz JS setState

setState ir asinhrons izsaukums nozīmē, ka, ja tiek izsaukts sinhronais zvans, tas var netikt atjaunināts īstajā laikā, piemēram, uzzināt objekta pašreizējo vērtību pēc atjaunināšanas, izmantojot setState, tas var nesniegt pašreizējo atjaunināto vērtību konsolē. Lai iegūtu kādu sinhrono uzvedību, ir jānodod funkcija, nevis objekts setState.

Sintakse:

Mēs varam izmantot setState (), lai mainītu komponenta stāvokli tieši, kā arī ar bultiņas funkciju.

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

Darbības, lai izveidotu React lietojumprogrammu:

1. darbība: Izveidojiet React lietojumprogrammu, izmantojot šādu komandu:

java binārais koks

npx create-react-app foldername>

2. darbība: Pēc projekta mapes, t.i., mapes nosaukuma, izveides pārejiet uz to, izmantojot šo komandu:

cd foldername>

Projekta struktūra:

1. pieeja: Viena atribūta atjaunināšana

Mēs iestatām sākotnējā stāvokļa vērtību iekšā konstruktora funkcija un izveidot citu funkciju updateState() stāvokļa atjaunināšanai. Tagad, kad mēs noklikšķinām uz pogas, tā tiek aktivizēta kā an onClick notikums kas maina valsts vērtību. Mēs veicam setState() metodi mūsu updateState() funkcija rakstot:

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

Kā redzat, mēs nododam objektu setState(). Šajā objektā ir tā stāvokļa daļa, kuru vēlamies atjaunināt un kura šajā gadījumā ir vērtība sveiciens . React izmanto šo vērtību un apvieno to objektā, kuram tā ir nepieciešama. Tas ir tāpat kā pogas komponents jautā, kas tam būtu jāizmanto, lai atjauninātu sveiciena vērtību, un setState() atbild ar atbildi.

Javascript

> 
parametrs čaulas skriptā
    
     Solis, lai palaistu lietojumprogrammu:    Palaidiet lietojumprogrammu, izmantojot šādu komandu no projekta saknes direktorija:
 
npm start>
 
    Izvade:    Tagad atveriet pārlūkprogrammu un dodieties uz      http://localhost:3000/      , jūs redzēsit šādu izvadi:
 
 
 
    2. pieeja:    Vairāku atribūtu atjaunināšana
 
Komponenta stāvokļa objekts var saturēt vairākus atribūtus, un funkcija React ļauj, izmantojot funkciju setState() atjaunināt tikai šo atribūtu apakškopu, kā arī izmantot vairākas setState() metodes, lai atjauninātu katru atribūta vērtību neatkarīgi.
 
Mēs iestatām sākotnējo stāvokli, inicializējot trīs dažādus atribūtus, un pēc tam izveidojam funkciju    updateState()    kas atjaunina savu vērtību ikreiz, kad tas tiek izsaukts. Vēlreiz šī funkcija tiek aktivizēta kā an     onClick notikums     un mēs vienlaikus saņemam atjauninātās mūsu štatu vērtības.
 
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}>Noklikšķiniet uz manis!       );  } } eksportēt noklusējuma lietotni;>>
 
 
 
 
    
 
> 
    
     Solis, lai palaistu lietojumprogrammu:    Palaidiet lietojumprogrammu, izmantojot šādu komandu no projekta saknes direktorija:
 
npm start>
 
    Izvade:    Tagad atveriet pārlūkprogrammu un dodieties uz      http://localhost:3000/      , jūs redzēsit šādu izvadi:
 
 
 
    3. pieeja:    Stāvokļa vērtību atjaunināšana, izmantojot rekvizītus.
 
Mēs izveidojām virkņu masīvu    testa tēmas    kā mūsu komponenta rekvizīti. Funkcija    tēmu saraksts    ir izveidots, lai kartētu visas virknes kā saraksta vienumus mūsu štatā    tēmas    . Funkcija    updateState    tiek aktivizēts un iestata tēmas, lai uzskaitītu vienumus. Noklikšķinot uz pogas, mēs saņemam atjauninātas stāvokļa vērtības. Šī metode ir labi pazīstama ar sarežģītu datu apstrādi un ļoti vieglu stāvokļa atjaunināšanu.
īpašo rakstzīmju nosaukums
 
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}>Noklikšķiniet uz manis!       );  } } eksportēt noklusējuma lietotni;>>
 
 
 
 
concat virknes java
    
 
> 
    
     Solis, lai palaistu lietojumprogrammu:    Palaidiet lietojumprogrammu, izmantojot šo komandu no projekta saknes direktorija:
 
npm start>
 
    Izvade:    Tagad atveriet pārlūkprogrammu un dodieties uz      http://localhost:3000/      , jūs redzēsit šādu izvadi:
 
 
 
    4. pieeja:    Stāvokļa atjaunināšana, izmantojot tā iepriekšējo vērtību.
 
Mēs izveidojam sākotnējo stāvokli    skaitīt    kuras vērtība ir 0. Funkcija    updateState()    palielina stāvokļa pašreizējo vērtību par 1, kad vien tas tiek izsaukts. Šoreiz mēs izmantojam setState() metodi bultiņas funkcijā, nododot garām    prevState    kā parametrs. Pašreizējai stāvokļa vērtībai tiek piekļūts, izmantojot    prevState.stateName    kas tiek palielināts par 1 ikreiz, kad nospiežam pogu. Šī metode ir ļoti noderīga, ja mēs iestatām vērtību stāvoklī tādā veidā, ka tā ir atkarīga no tās iepriekšējās vērtības.    Piemēram    , pārslēdzot Būla vērtību (patiesa/nepatiesa) vai palielinot/samazinot skaitli.
 
Javascript
 
    
 
     
  
java8 funkcijas
 
    
 
     
     
    
 
 
 
 
 
 // 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}>Noklikšķiniet uz manis!       );  } } eksportēt noklusējuma lietotni;>>
 
 
 
 
    
 
> 
    
     Solis, lai palaistu lietojumprogrammu:    Palaidiet lietojumprogrammu, izmantojot šo komandu no projekta saknes direktorija:
 
npm start>
 
    Izvade:    Tagad atveriet pārlūkprogrammu un dodieties uz      http://localhost:3000/      , jūs redzēsit šādu izvadi: