Warum ändert der Aufruf der Methode „react setState“ den Status nicht sofort?

ich lese Formen Abschnitt der Reactjs-Dokumentation und habe gerade versucht, diesen Code zu demonstrieren onChange Verwendungszweck (JSBIN).

var React= require('react');

var ControlledForm= React.createClass({
    getInitialState: function() {
        return {
            value: "initial value"
        };
    },

    handleChange: function(event) {
        console.log(this.state.value);
        this.setState({value: event.target.value});
        console.log(this.state.value);

    },

    render: function() {
        return (
            <input type="text" value={this.state.value} onChange={this.handleChange}/>
        );
    }
});

React.render(
    <ControlledForm/>,
  document.getElementById('mount')
);

Wenn ich die aktualisiere <input/> Wert im Browser, der zweite console.log innerhalb der handleChange Callback druckt das gleiche value Als der erste console.logWarum kann ich das Ergebnis nicht sehen this.setState({value: event.target.value}) im Rahmen von handleChange zurückrufen?

Von React Dokumentation:

setState() mutiert nicht sofort this.state erzeugt aber einen ausstehenden Zustandsübergang. Zugriff this.state nach dem Aufruf dieser Methode kann möglicherweise der vorhandene Wert zurückgegeben werden. Es gibt keine Garantie für den synchronen Betrieb von Aufrufen setState und Aufrufe können zur Leistungssteigerung gebündelt werden.

Wenn Sie möchten, dass eine Funktion ausgeführt wird, nachdem die Statusänderung erfolgt ist, übergeben Sie sie als Callback.

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

Wie in der React-Dokumentation erwähnt, gibt es keine Garantie für setState wird synchron gefeuert, also Ihr console.log kann den Zustand vor der Aktualisierung zurückgeben.

Michael Parker erwähnt die Weitergabe eines Rückrufs innerhalb der setState. Eine andere Möglichkeit, die Logik nach einer Zustandsänderung zu handhaben, ist über die componentDidUpdate Lifecycle-Methode, die in React-Dokumentation empfohlene Methode.

Im Allgemeinen empfehlen wir stattdessen die Verwendung von componentDidUpdate() für eine solche Logik.

Dies ist besonders nützlich, wenn es aufeinanderfolgend sein kann setStates ausgelöst, und Sie möchten nach jeder Zustandsänderung dieselbe Funktion auslösen. Anstatt jedem einen Rückruf hinzuzufügen setStatekönnten Sie die Funktion innerhalb von platzieren componentDidUpdateggf. mit spezifischer Logik im Inneren.

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

Sie könnten versuchen, ES7 async/await zu verwenden. Zum Beispiel mit Ihrem Beispiel:

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

Achten Sie auf die Reaktionslebenszyklusmethoden！

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

Ich habe mehrere Stunden daran gearbeitet, das herauszufinden getDerivedStateFromProps wird nach jedem angerufen setState().

😂

async-await Syntax funktioniert perfekt für etwas wie das Folgende …

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

Zugriff this.state nach dem Anruf beim setState -Methode gibt aufgrund der asynchronen Natur von nicht garantiert den aktualisierten Status zurück setState.

Um ein Update nach Anruf zu garantieren setStategibt es zwei Lösungen, die Sie verfolgen können.

Lösung 1: Wie in einer der obigen Antworten erwähnt, geben Sie Ihren Code in die ein componentDidUpdate Methode

Lösung 2: Wie in einer anderen der obigen Antworten erwähnt, geben Sie Ihre Daten als Rückruf weiter

 this.setState({value: myValue}, function () {
    this.functionThatIsExecutedWhenStateIsUpdated();
});

Es ist wichtig zu beachten, dass diese beiden Lösungen nicht eindeutig austauschbar sind. Das eine kann nicht ohne Weiteres alle Anwendungsfälle des anderen lösen. Als allgemeine Regel, wenn möglich, sagt Best Practice, dass Lösung 1 bevorzugt wird. Es gibt jedoch Anwendungsfälle, in denen nur Lösung 2 „effektiver“ funktioniert, wie z. B. der Anwendungsfall „Aktualisiere meine Ansicht und poste meine Daten“. Dieser Anwendungsfall geht so:

Nachdem Sie ein Element hinzugefügt haben, sagen Sie „Zeitplan hinzufügen“, ich möchte beide Fügen Sie dieses Element zu einer Front-End-Liste hinzu und posten Sie die gerade aktualisierte Liste sofort an das Back-End, wie im folgenden Konzept gezeigt:

Wenn Sie keine der beiden Lösungen tun, dh wenn Sie dies nur in Ihrem Code sagen:

addToItemArray = () => { 
     this.setState{{ scheduledItemsArray: newObjectListWithMax}}   
     this.postData();
}

<button className="btn btn-secondary btn-block" onClick={this.addToItemArray}>Add Shedule</button>

… Sie werden die Liste veröffentlichen ausschließlich den Punkt “Lieferung an Max”, da der Status bei Ihnen nicht aktualisiert wird this.postData() (wieder, weil es asynchron ist).

Wenn Sie Lösung 1 verwenden, würden Sie einen POST machen, nachdem Sie jedes Zeichen in das Textfeld Schedule Name eingegeben haben!

Es gibt auch andere Möglichkeiten, diesen Anwendungsfall zu berücksichtigen, aber Lösung 2 vermittelt die Absicht am besten, wenn der Code gelesen wird.

Da dieser Anwendungsfall in praktisch jeder Web-App allgegenwärtig ist, ist die in Michaels Antwort erläuterte Callback-Technik ein unverzichtbares Stück Code in jedem Entwickler-Toolkit.

Einfach ausgedrückt – this.setState({data: value}) ist von Natur aus asynchron, was bedeutet, dass es sich aus dem Call Stack herausbewegt und nur dann zum Call Stack zurückkehrt, wenn es nicht aufgelöst wird.

Bitte lesen Sie über Event Loop, um ein klares Bild über die asynchrone Natur in JS zu erhalten und warum die Aktualisierung einige Zeit in Anspruch nimmt –

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

Somit –

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

da die Aktualisierung einige Zeit in Anspruch nimmt. Um den obigen Prozess zu erreichen –

    this.setState({data:value},function () {
     console.log(this.state.data);
    });