Aktualisieren die verschachtelten Zustandseigenschaften in React

1. die setState()-Funktion in React
2. Aktualisieren Sie die verschachtelten Zustandseigenschaften in React
3. Fazit

Wenn wir versuchen, den Anfangszustand einer Komponente in React zu aktualisieren, bedeutet das, dass wir wollen, dass sich dieser Anfangszustand als Reaktion auf eine Aktion des Benutzers oder ein Systemereignis ändert.

Wenn der Anfangszustand geändert oder aktualisiert wird, ändern sich auch die im Browser angezeigten Informationen. Dies liegt daran, dass React die Komponente erneut mit dem aktualisierten Code rendert.

Die Funktion setState() ist die primäre React-Funktion, die den verschachtelten Zustand einer Komponente aktualisieren kann.

die setState()-Funktion in React

Nachdem wir den Anfangszustand einer Komponente gesetzt haben, ist der React setState() die Funktion, die aufgerufen wird, um einen neuen Zustand zu initialisieren. Da der Benutzer ein Ereignis auslösen muss, wenden wir die Funktion onClick zusammen mit setState() an, um die Aktion des Benutzers abzuhören und dann die aktualisierte Zustandskomponente zu rendern.

Aktualisieren Sie die verschachtelten Zustandseigenschaften in React

Wir werden uns nun verschiedene Beispiele ansehen, die zeigen, wie der Anfangszustand einer verschachtelten Komponente aktualisiert wird.

Aktualisieren Sie ein einzelnes Attribut

In diesem Beispiel verwenden wir die Methode setState(), um die Anfangszustandskomponente zu aktualisieren, und wir aktualisieren einen einzelnen Eintrag, der im Array vorhanden ist:

Code-Snippet (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 :
        'Welcome!!!'})
}
render(){
    return (
    <div>
        <h2>Greetings Portal</h2>
        <p>{this.state.greeting}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Ausgabe:

Nachdem wir den Anfangszustand der Komponente festgelegt haben, müssen wir zuerst das Schlüsselwort greeting an die Funktion updateState binden, damit React weiss, nach welchem ​​Schlüsselwort in den Komponenten gesucht und geändert werden muss.

Dann verwenden wir die Funktion setState, um zu codieren, welche Daten das Schlüsselwort greeting zurückgeben soll.

Schließlich verwenden wir den Event-Listener onClick mit der Funktion updateState, sodass der Benutzer auf Click me! klickt. klicken, werden die Informationen des Browsers geändert und aktualisiert.

Aktualisieren Sie mehrere Attribute

Dieses Beispiel ist dem vorherigen Beispiel viel ähnlicher. Aber hier haben wir es mit mehreren Einträgen im Komponentenzustand zu tun.

Code-Snippet (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 (
    <div>
        <h2>Test Portal</h2>
        <p>{this.state.test}</p>

        <p>{this.state.questions}</p>

        <p>{this.state.students}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
)
}
}
export default App;

Ausgabe:

Nachdem wir den ersten Zustand gesetzt haben, binden wir das Schlüsselwort this.state. Danach aktualisieren wir die Zustände der Elemente im Array.

Da wir es mit mehreren Elementen zu tun haben, fügen wir jedes Element in ein Absatzelement ein, um es wie eine Liste anzuzeigen, wenn es auf der Webseite gerendert wird.

Status mit Requisiten aktualisieren

In diesem Beispiel verwenden wir Requisiten, um den Anfangszustand zu aktualisieren. Requisiten ist ein kurzes Wort für Eigenschaften.

Diese Methode ist ideal für den Umgang mit Aufgaben, die mehrere Elemente im Array und komplexe Datenformen enthalten, und hilft dabei, den Status einfach zu aktualisieren.

Wie in den obigen Beispielen führen wir die Codierung in der App.js durch.

Code-Snippet (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 (
    <ul>
        {this.props.testTopics.map(topic => (
            <li>{topic}</li>
        ))}
    </ul>
    )
}

updateState(){
    // Changing state
    this.setState({
    testName: 'Test topics are:',
    topics: this.listOfTopics()
    })
}
render(){
    return (
    <div>
        <h2>Test Information</h2>
        <p>{this.state.testName}</p>
        <p>{this.state.topics}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Ausgabe:

Wir beginnen damit, die mehreren Daten in unserem testTopics-Array zu übergeben. Dann setzen wir den Anfangszustand unserer Daten in das testName-Array.

Nachdem wir das Schlüsselwort testName an updateState gebunden haben, erstellen wir eine listOfTopics-Funktion, die die Elemente im testTopics-Array als Liste mit dem Status topic zurückgibt.

Dann verwenden wir die Funktion setState() zusammen mit dem Ereignis-Listener onClick, sodass, wenn die Meldung Click me! gedrückt wird, wird die Liste der Elemente anstelle des Ausgangszustands React js Test angezeigt.

Status mit seinem vorherigen Wert aktualisieren

Dies ist ein numerisches Beispiel, bei dem wir den Anfangswert erhöhen möchten. In diesem Fall möchten wir, dass sich der Anfangszustand erhöht, anstatt sich zu ändern.

Da wir möchten, dass der Anfangszustand erhöht wird, übergeben wir prevState als Parameter innerhalb der Funktion useState() und useState() wird in einer Pfeilfunktion verwendet.

Code-Snippet (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 (
            <div>
                <h2>Click Counter</h2>
                <p>You have clicked me {this.state.count} times.</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        )
    }
}

export default App;

Ausgabe:

Wir haben prevState innerhalb der setState-Funktion aufgerufen, damit beim Klicken auf die Schaltfläche der letzte Zustand der Daten erkannt und dieser Zustand um 1 erhöht wird, da wir im return-Array festgelegt haben, um den Zähler zu erhöhen 1.

Fazit

Es gibt verschiedene Verwendungsmöglichkeiten, um den Zustand einer Komponente in React zu aktualisieren. Aber mit den Beispielen, die wir besprochen haben, sollte ein Programmierer in der Lage sein, die verschiedenen Anwendungsfälle in jeder Situation anzuwenden.