Alle React-Komponenten können eine haben Zustand mit ihnen verbunden. Der Zustand einer Komponente kann sich entweder aufgrund einer Reaktion auf eine vom Benutzer durchgeführte Aktion oder eines vom System ausgelösten Ereignisses ändern. Immer wenn sich der Status ändert, rendert React die Komponente erneut im Browser. Bevor wir den Wert des Status aktualisieren, müssen wir ein anfängliches Status-Setup erstellen. Sobald wir damit fertig sind, verwenden wir die setState()-Methode um das Statusobjekt zu ändern. Es stellt sicher, dass die Komponente aktualisiert wurde, und fordert ein erneutes Rendern der Komponente.
Inhaltsverzeichnis
- Reagiere auf JS setState
- Schritte zum Erstellen einer Reaktionsanwendung:
- Mehrere Attribute aktualisieren
- Statuswerte mithilfe von Requisiten aktualisieren.
- Aktualisieren des Status unter Verwendung seines vorherigen Werts.
Reagiere auf JS setState
setState ist ein asynchroner Aufruf. Wenn ein synchroner Aufruf aufgerufen wird, wird er möglicherweise nicht zum richtigen Zeitpunkt aktualisiert, z. B. um den aktuellen Wert eines Objekts nach einer Aktualisierung mit setState zu ermitteln. Möglicherweise wird der aktuell aktualisierte Wert nicht auf der Konsole angezeigt. Um ein synchrones Verhalten zu erzielen, muss eine Funktion anstelle eines Objekts an setState übergeben werden.
Syntax:
Wir können setState() verwenden, um den Zustand der Komponente direkt oder über eine Pfeilfunktion zu ändern.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Schritte zum Erstellen einer Reaktionsanwendung:
Schritt 1: Erstellen Sie eine React-Anwendung mit dem folgenden Befehl:
Mac-Betriebssysteme
npx create-react-app foldername>
Schritt 2: Nachdem Sie Ihren Projektordner, d. h. Ordnernamen, erstellt haben, wechseln Sie mit dem folgenden Befehl dorthin:
cd foldername>
Projektstruktur:
Ansatz 1: Einzelnes Attribut wird aktualisiert
Wir richten darin unseren Anfangszustandswert ein Konstruktorfunktion und eine weitere Funktion erstellen updateState() zur Aktualisierung des Standes. Wenn wir nun auf die Schaltfläche klicken, wird diese als aktiviert onClick-Ereignis wodurch sich der Zustandswert ändert. Wir führen die Methode setState() in unserem aus updateState()-Funktion indem du schreibst:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Wie Sie sehen können, übergeben wir ein Objekt an setState(). Dieses Objekt enthält den Teil des Zustands, den wir aktualisieren möchten, in diesem Fall der Wert von Gruß . React nimmt diesen Wert und fügt ihn dem Objekt hinzu, das ihn benötigt. Es ist so, als ob die Schaltflächenkomponente fragt, was sie zum Aktualisieren des Grußwerts verwenden soll, und setState() mit einer Antwort antwortet.
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}>Klick mich! ); } } Standard-App exportieren;> |
>
>
Schritt zum Ausführen der Anwendung: Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus:
npm start>
Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/ , sehen Sie die folgende Ausgabe:
Ansatz 2: Mehrere Attribute aktualisieren
Das Statusobjekt einer Komponente kann mehrere Attribute enthalten und React ermöglicht die Verwendung der setState()-Funktion, um nur eine Teilmenge dieser Attribute zu aktualisieren, sowie die Verwendung mehrerer setState()-Methoden, um jeden Attributwert unabhängig zu aktualisieren.
Maurerformel
Wir legen unseren Anfangszustand fest, indem wir drei verschiedene Attribute initialisieren und dann eine Funktion erstellen updateState() welches seinen Wert bei jedem Aufruf aktualisiert. Diese Funktion wird erneut als ausgelöst onClick-Ereignis und wir erhalten gleichzeitig die aktualisierten Werte unserer Staaten.
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}>Klick mich! ); } } Standard-App exportieren;> |
>
>
Schritt zum Ausführen der Anwendung: Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus:
npm start>
Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/ , sehen Sie die folgende Ausgabe:
Ansatz 3: Statuswerte mithilfe von Requisiten aktualisieren.
Wir richten ein Array von Strings ein testTopics als Requisiten für unsere Komponente. Eine Funktion listOfTopics wird erstellt, um alle Zeichenfolgen als Listenelemente in unserem Bundesstaat abzubilden Themen . Die Funktion updateState wird ausgelöst und legt die Themen fest, um Elemente aufzulisten. Wenn wir auf die Schaltfläche klicken, erhalten wir aktualisierte Statuswerte. Diese Methode ist dafür bekannt, komplexe Daten zu verarbeiten und den Status sehr einfach zu aktualisieren.
Ubuntu Build unerlässlich
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}>Klick mich! ); } } Standard-App exportieren;> |
>
>
Schritt zum Ausführen der Anwendung: Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus:
npm start>
Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/ , sehen Sie die folgende Ausgabe:
Zufallswertgenerator in Java
Ansatz 4: Aktualisieren des Status unter Verwendung seines vorherigen Werts.
Wir schaffen einen Ausgangszustand zählen mit einem Wert von 0. Die Funktion updateState() erhöht den aktuellen Wert des Zustands bei jedem Aufruf um 1. Dieses Mal verwenden wir die Methode setState() in einer Pfeilfunktion durch Übergabe prevState als Parameter. Auf den aktuellen Wert des Zustands wird mit zugegriffen prevState.stateName die jedes Mal um 1 erhöht wird, wenn wir die Taste drücken. Diese Methode ist wirklich nützlich, wenn wir einen Wert im Zustand so festlegen, dass er von seinem vorherigen Wert abhängt. Zum Beispiel , einen booleschen Wert umschalten (wahr/falsch) oder eine Zahl erhöhen/verringern.
Javascript
Ganzzahl-Doppel-Java
// 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}>Klick mich! ); } } Standard-App exportieren;> |
>
>
Schritt zum Ausführen der Anwendung: Führen Sie die Anwendung mit dem folgenden Befehl aus dem Stammverzeichnis des Projekts aus:
npm start>
Ausgabe: Öffnen Sie nun Ihren Browser und gehen Sie zu http://localhost:3000/ , sehen Sie die folgende Ausgabe:
