So ändern Sie den Komponentenstatus in React

In React können Sie setState() verwenden, um den Status der Komponente zu ändern. Diese Methode kann Änderungen am Komponentenstatus in die Warteschlange stellen und auch den neuesten Status abrufen „setState(updater,[callback function])“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

So ändern Sie den Komponentenstatus in React

In React kann der Status der Komponente nicht direkt geändert werden. Er muss über setState() geändert werden.

In React ist setstate eine Methode zum Aktualisieren des Komponentenstatus. setState() stellt Änderungen am Komponentenstatus in die Warteschlange und React wird benachrichtigt, dass es diese Komponente und ihre Unterkomponenten mit dem aktualisierten Status neu rendern muss. Die Syntax lautet „setState(object, [callback function])“.

Syntax:

setState(updater[, callback])

Updater Updater

Rückruffunktion, die nach dem Update ausgeführt wird

Status ändern

Zum Beispiel, wenn Sie den Inhaltswert im Status durch direkte Änderung in „香香“ ändern möchten löst nicht die Aktualisierung der Ansicht aus:

state = {
  content: '大熊'
}

muss über setState geändert werden:

this.state.content = '香香'

Den neuesten Statuswert abrufen

Da setState() asynchron ist, können Sie nach der Änderung möglicherweise nicht den neuesten Wert abrufen Wenn Sie den Status abrufen möchten, können Sie eine Rückruffunktion für setState() bereitstellen. Dieser Rückruf wird ausgeführt, nachdem der Status aktualisiert wurde. Sie können den neuesten Status in der Rückruffunktion abrufen

this.setState({
  content: '香香'
})

setState() Ein Parameter kann auch eine Funktion sein. Diese Funktion empfängt zwei Parameter: Der erste Parameter ist der Statuswert vor der Aktualisierung und der zweite Parameter sind Requisiten (die beim Ändern die von der übergeordneten Komponente übergebenen Daten abrufen können). Beim Status handelt es sich um den vorherigen Parameter. Diese Form kann verwendet werden, wenn ein Statuswert verwendet wird.

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Komponentenstatus in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!