ReactJS setState()
Alle React-komponenterne kan have en stat forbundet med dem. En komponents tilstand kan ændres enten på grund af et svar på en handling udført af brugeren eller en hændelse udløst af systemet. Når tilstanden ændres, gengiver React komponenten til browseren. Før vi opdaterer værdien af staten, skal vi bygge en indledende tilstandsopsætning. Når vi er færdige med det, bruger vi setState() metode for at ændre tilstandsobjektet. Det sikrer, at komponenten er blevet opdateret og kræver gengivelse af komponenten.
Indholdsfortegnelse
- Reager JS setState
- Trin til at oprette React Application:
- Opdatering af flere attributter
- Opdatering af tilstandsværdier ved hjælp af rekvisitter.
- Opdaterer tilstanden med dens tidligere værdi.
Reager JS setState
sætState er et asynkront opkald betyder, at hvis et synkront opkald bliver kaldt, bliver det muligvis ikke opdateret på det rigtige tidspunkt, f.eks. at kende den aktuelle værdi af et objekt efter en opdatering ved hjælp af setState, at det muligvis ikke giver den aktuelle opdaterede værdi på konsollen. For at få en vis adfærd af synkron behov for at videregive funktion i stedet for objekt til setState.
Syntaks:
Vi kan bruge setState() til at ændre komponentens tilstand direkte såvel som gennem en pilefunktion.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 })) Trin til at oprette React Application:
Trin 1: Opret en React-applikation ved hjælp af følgende kommando:
npx create-react-app foldername
Trin 2: Når du har oprettet din projektmappe, dvs. mappenavn, skal du flytte til den ved hjælp af følgende kommando:
cd foldername
Projektets struktur:
Fremgangsmåde 1: Opdatering af enkelt attribut
Vi indstiller vores oprindelige tilstandsværdi indeni konstruktør funktion og oprette en anden funktion updateState() for at opdatere staten. Når vi nu klikker på knappen, bliver sidstnævnte udløst som en onClick begivenhed hvilket ændrer tilstandsværdien. Vi udfører setState() metode i vores updateState() funktion ved at skrive:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) Som du kan se, sender vi et objekt til setState(). Dette objekt indeholder den del af tilstanden, vi ønsker at opdatere, som i dette tilfælde er værdien af hilsen . React tager denne værdi og fletter den ind i det objekt, der har brug for det. Det er ligesom knapkomponenten spørger, hvad den skal bruge til at opdatere værdien af 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}>Klik på mig! ); } } eksporter standardapp;> |
Trin til at køre applikation: Kør applikationen ved hjælp af følgende kommando fra projektets rodbibliotek:
npm start
Produktion: Åbn nu din browser og gå til http://localhost:3000/ , vil du se følgende output:
Fremgangsmåde 2: Opdatering af flere attributter
Tilstandsobjektet for en komponent kan indeholde flere attributter, og React tillader brug af setState()-funktionen til kun at opdatere et undersæt af disse attributter samt at bruge flere setState()-metoder til at opdatere hver attributværdi uafhængigt.
Vi indstiller vores begyndelsestilstand ved at initialisere tre forskellige attributter, og derefter opretter vi en funktion updateState() som opdaterer sin værdi, hver gang den kaldes. Endnu en gang bliver denne funktion udløst som en onClick begivenhed og vi får de opdaterede værdier for vores stater på samme tid.
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}>Klik på mig! ); } } eksporter standardapp;> |
Trin til at køre applikation: Kør applikationen ved hjælp af følgende kommando fra projektets rodbibliotek:
npm start
Produktion: Åbn nu din browser og gå til http://localhost:3000/ , vil du se følgende output:
Fremgangsmåde 3: Opdatering af tilstandsværdier ved hjælp af rekvisitter.
Vi sætter en række strenge op testemner som rekvisitter til vores komponent. En funktion emneliste er oprettet for at kortlægge alle strengene som listeelementer i vores stat emner . Funktionen updateState udløses og indstiller emnerne til at liste emner. Når vi klikker på knappen, får vi opdaterede tilstandsværdier. Denne metode er velkendt for at håndtere komplekse data og opdatere staten meget nemt.
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}>Klik på mig! ); } } eksporter standardapp;> |
Trin til at køre applikation: Kør applikationen ved hjælp af følgende kommando fra projektets rodbibliotek:
npm start
Produktion: Åbn nu din browser og gå til http://localhost:3000/ , vil du se følgende output:
Fremgangsmåde 4: Opdaterer tilstanden med dens tidligere værdi.
Vi skaber en begyndelsestilstand tælle med værdien 0. Funktionen updateState() øger nutidsværdien af staten med 1, hver gang den kaldes. Denne gang bruger vi setState() metoden i en pilefunktion ved at sende prevState som en parameter. Den aktuelle værdi af staten tilgås med prevState.stateName som bliver forøget med 1, hver gang vi trykker på knappen. Denne metode er virkelig nyttig, når vi indstiller en værdi i tilstanden på en sådan måde, at den afhænger af dens tidligere værdi. For eksempel , skifte mellem en boolesk værdi (sand/falsk) eller stigning/nedsættelse af et tal.
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}>Klik på mig! ); } } eksporter standardapp;> |
Trin til at køre applikation: Kør applikationen ved hjælp af følgende kommando fra projektets rodbibliotek:
npm start
Produktion: Åbn nu din browser og gå til http://localhost:3000/ , vil du se følgende output:
