Alla React-komponenter kan ha en stat förknippas med dem. Tillståndet för en komponent kan ändras antingen på grund av ett svar på en åtgärd som utförs av användaren eller en händelse som utlöses av systemet. Närhelst tillståndet ändras återrenderar React komponenten till webbläsaren. Innan vi uppdaterar värdet på tillståndet måste vi bygga en initial tillståndsinställning. När vi är klara med det använder vi setState() metod för att ändra tillståndsobjektet. Det säkerställer att komponenten har uppdaterats och kräver omrendering av komponenten.
Innehållsförteckning
- Reagera JS setState
- Steg för att skapa React Application:
- Uppdaterar flera attribut
- Uppdatering av tillståndsvärden med hjälp av rekvisita.
- Uppdaterar tillståndet med dess tidigare värde.
Reagera JS setState
setState är ett asynkront anrop betyder att om ett synkront anrop anropas kanske det inte uppdateras vid rätt tidpunkt, som att veta det aktuella värdet för ett objekt efter en uppdatering med setState, kanske det inte ger det aktuella uppdaterade värdet på konsolen. För att få något beteende av synkront måste skicka funktion istället för objekt till setState.
Syntax:
Vi kan använda setState() för att ändra tillståndet för komponenten direkt såväl som genom en pilfunktion.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Steg för att skapa React Application:
Steg 1: Skapa en React-applikation med följande kommando:
matematiska metoder i java
npx create-react-app foldername>
Steg 2: När du har skapat din projektmapp, dvs mappnamn, flytta till den med följande kommando:
cd foldername>
Projektets struktur:
Tillvägagångssätt 1: Uppdaterar enstaka attribut
Vi ställer in vårt initiala tillståndsvärde inuti konstruktörsfunktion och skapa en annan funktion updateState() för att uppdatera staten. När vi nu klickar på knappen utlöses den senare som en onClick-händelse vilket ändrar tillståndsvärdet. Vi utför setState()-metoden i vår updateState() funktion genom att skriva:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Som du kan se skickar vi ett objekt till setState(). Detta objekt innehåller den del av tillståndet vi vill uppdatera som i det här fallet är värdet på hälsning . React tar detta värde och slår samman det i objektet som behöver det. Det är precis som att knappkomponenten frågar vad den ska använda för att uppdatera värdet på hälsning och setState() svarar med ett 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}>Klicka här! ); } } exportera standardapp;> |
namn på städer usa
>
>
Steg för att köra applikation: Kör programmet med följande kommando från projektets rotkatalog:
npm start>
Produktion: Öppna nu din webbläsare och gå till http://localhost:3000/ , kommer du att se följande utdata:
Tillvägagångssätt 2: Uppdaterar flera attribut
Tillståndsobjektet för en komponent kan innehålla flera attribut och React tillåter användning av setState()-funktionen för att uppdatera endast en delmängd av dessa attribut samt att använda flera setState()-metoder för att uppdatera varje attributvärde oberoende.
Vi ställer in vårt initiala tillstånd genom att initiera tre olika attribut, och sedan skapar vi en funktion updateState() som uppdaterar sitt värde när den anropas. Återigen utlöses denna funktion som en onClick-händelse och vi får de uppdaterade värdena för våra stater samtidigt.
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}>Klicka här! ); } } exportera standardapp;> |
>
>
Steg för att köra applikation: Kör programmet med följande kommando från projektets rotkatalog:
npm start>
Produktion: Öppna nu din webbläsare och gå till http://localhost:3000/ , kommer du att se följande utdata:
Tillvägagångssätt 3: Uppdatering av tillståndsvärden med hjälp av rekvisita.
Vi sätter upp en rad strängar testämnen som rekvisita för vår komponent. En funktion listOfTopics skapas för att mappa alla strängar som listobjekt i vårt tillstånd ämnen . Funktionen updateState aktiveras och ställer in ämnena för att lista objekt. När vi klickar på knappen får vi uppdaterade tillståndsvärden. Denna metod är välkänd för att hantera komplexa data och uppdatera tillståndet mycket enkelt.
ubuntu bygga viktigt
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> >>
vad är struktur i datastruktur >>
>{>/* Set click handler */>}> > this.updateState}>Klicka här! ); } } exportera standardapp;> |
>
>
Steg för att köra applikation: Kör programmet med följande kommando från projektets rotkatalog:
npm start>
Produktion: Öppna nu din webbläsare och gå till http://localhost:3000/ , kommer du att se följande utdata:
Tillvägagångssätt 4: Uppdaterar tillståndet med dess tidigare värde.
Vi skapar ett initialt tillstånd räkna med värdet 0. Funktionen updateState() ökar tillståndets nuvärde med 1 när det anropas. Den här gången använder vi metoden setState() i en pilfunktion genom att skicka prevState som en parameter. Det aktuella värdet av staten nås med prevState.stateName som ökas med 1 när vi trycker på knappen. Denna metod är verkligen användbar när vi ställer in ett värde i tillståndet på ett sådant sätt att det beror på dess tidigare värde. Till exempel , växla ett booleskt värde (sant/falskt) eller öka/minska ett tal.
Javascript
java webbtjänster
// 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}>Klicka här! ); } } exportera standardapp;> |
>
>
Steg för att köra applikation: Kör programmet med följande kommando från projektets rotkatalog:
npm start>
Produktion: Öppna nu din webbläsare och gå till http://localhost:3000/ , kommer du att se följande utdata:
