Alle React-komponentene kan ha en stat knyttet til dem. Tilstanden til en komponent kan endres enten på grunn av en respons på en handling utført av brukeren eller en hendelse utløst av systemet. Hver gang tilstanden endres, gjengir React komponenten til nettleseren. Før vi oppdaterer verdien til staten, må vi bygge et innledende tilstandsoppsett. Når vi er ferdige med det, bruker vi setState()-metoden for å endre tilstandsobjektet. Den sikrer at komponenten er oppdatert og krever gjengivelse av komponenten.
Innholdsfortegnelse
- Reager JS setState
- Trinn for å lage en React-applikasjon:
- Oppdatering av flere attributter
- Oppdatering av tilstandsverdier ved hjelp av rekvisitter.
- Oppdaterer tilstanden med dens forrige verdi.
Reager JS setState
setState er et asynkront anrop betyr at hvis et synkront anrop blir kalt, kan det hende at det ikke oppdateres til rett tid, for eksempel å vite gjeldende verdi av et objekt etter en oppdatering med setState, at det kanskje ikke gir den gjeldende oppdaterte verdien på konsollen. For å få en synkron oppførsel må du sende funksjon i stedet for objekt til setState.
Syntaks:
Vi kan bruke setState() for å endre tilstanden til komponenten direkte så vel som gjennom en pilfunksjon.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Trinn for å lage en React-applikasjon:
Trinn 1: Opprett en React-applikasjon ved å bruke følgende kommando:
flyte til streng
npx create-react-app foldername>
Steg 2: Etter å ha opprettet prosjektmappen, dvs. mappenavn, flytter du til den ved å bruke følgende kommando:
cd foldername>
Prosjektstruktur:
Tilnærming 1: Oppdaterer enkeltattributt
Vi setter opp vår opprinnelige tilstandsverdi inne konstruktørfunksjon og opprette en annen funksjon updateState() for å oppdatere staten. Når vi nå klikker på knappen, blir sistnevnte utløst som en onClick-hendelse som endrer tilstandsverdien. Vi utfører setState()-metoden i vår updateState() funksjon ved å skrive:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Som du kan se, sender vi et objekt til setState(). Dette objektet inneholder den delen av tilstanden vi ønsker å oppdatere, som i dette tilfellet er verdien av hilsen . React tar denne verdien og slår den sammen til objektet som trenger det. Det er akkurat som knappekomponenten spør hva den skal bruke for å oppdatere verdien av hilsen og setState() svarer med et svar.
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}>Klikk på meg! ); } } eksporter standard app;> |
>
>
Trinn for å kjøre applikasjon: Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet:
npm start>
Produksjon: Åpne nå nettleseren og gå til http://localhost:3000/ , vil du se følgende utgang:
np.histogram
Tilnærming 2: Oppdatering av flere attributter
Tilstandsobjektet til en komponent kan inneholde flere attributter og React tillater bruk av setState()-funksjonen for å oppdatere bare et undersett av disse attributtene, samt å bruke flere setState()-metoder for å oppdatere hver attributtverdi uavhengig.
Vi setter starttilstanden vår ved å initialisere tre forskjellige attributter, og så lager vi en funksjon updateState() som oppdaterer verdien når den kalles. Nok en gang blir denne funksjonen utløst som en onClick-hendelse og vi får de oppdaterte verdiene til statene våre samtidig.
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}>Klikk på meg! ); } } eksporter standard app;> |
>
>
Trinn for å kjøre applikasjon: Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet:
npm start>
Produksjon: Åpne nå nettleseren og gå til http://localhost:3000/ , vil du se følgende utgang:
Tilnærming 3: Oppdatering av tilstandsverdier ved hjelp av rekvisitter.
Vi setter opp en rekke strenger testemner som rekvisitter for vår komponent. En funksjon emneliste er opprettet for å kartlegge alle strengene som listeelementer i staten vår emner . Funksjonen updateState utløses og setter emnene til å liste elementer. Når vi klikker på knappen får vi oppdaterte tilstandsverdier. Denne metoden er velkjent for å håndtere komplekse data og oppdatere tilstanden veldig enkelt.
eksempel på binært søketre
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}>Klikk på meg! ); } } eksporter standard app;> |
>
>
java while loop
Trinn for å kjøre applikasjon: Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet:
npm start>
Produksjon: Åpne nå nettleseren og gå til http://localhost:3000/ , vil du se følgende utgang:
Tilnærming 4: Oppdaterer tilstanden med dens forrige verdi.
Vi skaper en starttilstand telle har en verdi på 0. Funksjonen updateState() øker nåverdien av staten med 1 hver gang den kalles. Denne gangen bruker vi setState()-metoden i en pilfunksjon ved å sende prevState som en parameter. Den nåværende verdien av staten er tilgjengelig med prevState.stateName som økes med 1 hver gang vi trykker på knappen. Denne metoden er veldig nyttig når vi setter en verdi i tilstanden på en slik måte at den avhenger av dens tidligere verdi. For eksempel , veksle mellom et boolsk (sant/usant) eller øke/minske et tall.
Javascript
aws sns
// 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}>Klikk på meg! ); } } eksporter standard app;> |
>
>
Trinn for å kjøre applikasjon: Kjør programmet ved å bruke følgende kommando fra rotkatalogen til prosjektet:
npm start>
Produksjon: Åpne nå nettleseren og gå til http://localhost:3000/ , vil du se følgende utgang:
