Warum mutiert der Aufruf der Methode react setState den Status nicht sofort?

Ich lese den Abschnitt Formulare vonreagierenDokumentation und habe gerade diesen Code ausprobiert, um die onChangeVerwendung zu demonstrieren ( 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 Aktualisierung <input/>Wert im Browser, die zweite console.loginnerhalb des handleChangedruckt Rückruf der gleiche valuewie der erste console.log, warum ich nicht das Ergebnis sehen können , this.setState({value: event.target.value})im Rahmen des handleChangeRückruf?

Aus der Dokumentation von React :

setState()mutiert nicht sofort, this.statesondern erzeugt einen ausstehenden Zustandsübergang. Der Zugriff this.statenach dem Aufrufen dieser Methode kann möglicherweise den vorhandenen Wert zurückgeben. Es gibt keine Garantie für den synchronen Betrieb von Anrufen an setStateund Anrufe können für Leistungssteigerungen gestapelt werden.

Wenn Sie möchten, dass eine Funktion nach der Statusänderung ausgeführt wird, übergeben Sie sie als Rückruf.

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 setStateein synchrones Auslösen. Daher console.logkönnen Sie den Status vor der Aktualisierung zurückgeben.

Michael Parker erwähnt die Rückgabe eines Rückrufs innerhalb der setState. Eine andere Möglichkeit, die Logik nach einer Statusänderung zu handhaben, ist die componentDidUpdateLifecycle-Methode, die in React-Dokumenten empfohlen wird.

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

Dies ist besonders nützlich, wenn möglicherweise mehrere aufeinanderfolgende setStates ausgelöst werden und Sie nach jeder Statusänderung dieselbe Funktion auslösen möchten. Anstatt jedem einen Rückruf hinzuzufügen setState, können Sie die Funktion innerhalb von platzieren componentDidUpdate, wobei bei Bedarf eine bestimmte Logik enthalten ist.

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

Sie können versuchen, ES7 async / await zu verwenden. Zum Beispiel anhand Ihres Beispiels:

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 gearbeitet, um herauszufinden, dass getDerivedStateFromPropsdas nach jedem aufgerufen wird setState().

😂

async-await Die Syntax funktioniert perfekt für Folgendes:

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}`);
}

Einfach ausgedrückt - this.setState ({data: value}) ist asynchroner Natur, dh es verlässt den Call Stack und kehrt nur dann zum Call Stack zurück, wenn es 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

Daher -

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

da es Zeit braucht, um zu aktualisieren. Um den oben genannten Prozess zu erreichen -

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