ReactJS setState()
Alle React-componenten kunnen een staat met hen geassocieerd. De status van een component kan veranderen als gevolg van een reactie op een actie die door de gebruiker wordt uitgevoerd, of als gevolg van een gebeurtenis die door het systeem wordt geactiveerd. Telkens wanneer de status verandert, rendert React de component opnieuw naar de browser. Voordat we de waarde van de staat bijwerken, moeten we een initiële statusconfiguratie bouwen. Als we er klaar mee zijn, gebruiken we de setState()-methode om het statusobject te wijzigen. Het zorgt ervoor dat de component is bijgewerkt en vraagt om herweergave van de component.
Inhoudsopgave
- Reageer JS setState
- Stappen om een React-applicatie te maken:
- Meerdere attributen bijwerken
- Statuswaarden bijwerken met behulp van rekwisieten.
- De status bijwerken met behulp van de vorige waarde.
Reageer JS setState
setState is een asynchrone aanroep, wat betekent dat als een synchrone aanroep wordt aangeroepen, deze mogelijk niet op het juiste moment wordt bijgewerkt, zoals het kennen van de huidige waarde van een object na een update met behulp van setState. Het geeft mogelijk niet de huidige bijgewerkte waarde op de console. Om bepaald gedrag van synchroon te krijgen, moet u de functie doorgeven in plaats van het object aan setState.
Syntaxis:
We kunnen setState() gebruiken om de status van de component rechtstreeks of via een pijlfunctie te wijzigen.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 })) Stappen om een React-applicatie te maken:
Stap 1: Maak een React-applicatie met behulp van de volgende opdracht:
npx create-react-app foldername
Stap 2: Nadat u uw projectmap, d.w.z. mapnaam, hebt gemaakt, gaat u ernaartoe met behulp van de volgende opdracht:
cd foldername
Projectstructuur:
Benadering 1: Eén attribuut bijwerken
We hebben onze initiële statuswaarde binnenin ingesteld constructor-functie en creëer een andere functie updateState() voor het bijwerken van de staat. Wanneer we nu op de knop klikken, wordt deze laatste geactiveerd als een onClick-evenement waardoor de statuswaarde verandert. We voeren de setState()-methode uit in onze updateState()-functie door te schrijven:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) Zoals je kunt zien, geven we een object door aan setState(). Dit object bevat het deel van de staat dat we willen bijwerken en dat in dit geval de waarde is groet . React neemt deze waarde en voegt deze samen met het object dat deze nodig heeft. Het is net alsof de knopcomponent vraagt wat hij moet gebruiken om de waarde van de begroeting bij te werken, en setState() antwoordt met een antwoord.
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 hier! ); } } standaardapp exporteren;> |
Stap om de applicatie uit te voeren: Voer de toepassing uit met behulp van de volgende opdracht vanuit de hoofdmap van het project:
npm start
Uitgang: Open nu uw browser en ga naar http://localhost:3000/ , ziet u de volgende uitvoer:
Benadering 2: Meerdere attributen bijwerken
Het statusobject van een component kan meerdere attributen bevatten en React maakt het gebruik van de setState()-functie mogelijk om slechts een subset van die attributen bij te werken, evenals het gebruik van meerdere setState()-methoden om elke attribuutwaarde onafhankelijk bij te werken.
We stellen onze beginstatus in door drie verschillende attributen te initialiseren, en vervolgens creëren we een functie updateState() die de waarde ervan bijwerkt wanneer deze wordt aangeroepen. Opnieuw wordt deze functie geactiveerd als een onClick-evenement en we krijgen tegelijkertijd de bijgewerkte waarden van onze staten.
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 hier! ); } } standaardapp exporteren;> |
Stap om de applicatie uit te voeren: Voer de toepassing uit met behulp van de volgende opdracht vanuit de hoofdmap van het project:
npm start
Uitgang: Open nu uw browser en ga naar http://localhost:3000/ , ziet u de volgende uitvoer:
Benadering 3: Statuswaarden bijwerken met behulp van rekwisieten.
We hebben een array van strings opgezet testOnderwerpen als rekwisieten voor onze component. Een functie lijstVanOnderwerpen is gemaakt om alle strings in kaart te brengen als lijstitems in onze staat onderwerpen . De functie updateState wordt geactiveerd en stelt de onderwerpen in om items weer te geven. Wanneer we op de knop klikken, krijgen we bijgewerkte statuswaarden. Deze methode staat bekend om het verwerken van complexe gegevens en het zeer gemakkelijk bijwerken van de status.
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 hier! ); } } standaardapp exporteren;> |
Stap om de applicatie uit te voeren: Voer de toepassing uit met behulp van de volgende opdracht vanuit de hoofdmap van het project:
npm start
Uitgang: Open nu uw browser en ga naar http://localhost:3000/ , ziet u de volgende uitvoer:
Benadering 4: De status bijwerken met behulp van de vorige waarde.
We creëren een begintoestand graaf met een waarde van 0. De functie updateState() verhoogt de huidige waarde van de status met 1 wanneer deze wordt aangeroepen. Deze keer gebruiken we de setState()-methode in een pijlfunctie door te passeren vorigeState als parameter. Met wordt toegang verkregen tot de huidige waarde van de status vorigeState.stateName die met 1 wordt verhoogd telkens wanneer we op de knop drukken. Deze methode is erg handig als we een waarde in de staat zo instellen dat deze afhankelijk is van de vorige waarde. Bijvoorbeeld , een booleaanse waarde (waar/onwaar) schakelen of een getal verhogen/verlagen.
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 hier! ); } } standaardapp exporteren;> |
Stap om de applicatie uit te voeren: Voer de toepassing uit met behulp van de volgende opdracht vanuit de hoofdmap van het project:
npm start
Uitgang: Open nu uw browser en ga naar http://localhost:3000/ , ziet u de volgende uitvoer:
