Perché chiamare il metodo reazioni setState non muta immediatamente lo stato?

Sto leggendo la sezione Forms direactjsdocumentazione e ho appena provato questo codice per dimostrare l' onChangeutilizzo ( 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')
);

Quando aggiorno il <input/>valore nel browser, il secondo console.logall'interno del handleChangecallback stampa lo stesso valuedel primo console.log, Perché non riesco a vedere il risultato di this.setState({value: event.target.value})nell'ambito del handleChangecallback?

Dalla documentazione di React :

setState()non muta immediatamente this.statema crea una transizione di stato in sospeso. L'accesso this.statedopo aver chiamato questo metodo può potenzialmente restituire il valore esistente. Non vi è alcuna garanzia di funzionamento sincrono delle chiamate setStatee le chiamate possono essere messe in batch per ottenere miglioramenti delle prestazioni.

Se si desidera eseguire una funzione dopo il cambio di stato, passarla come callback.

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

Come menzionato nella documentazione di React, non vi è alcuna garanzia di setStateessere licenziato in modo sincrono, quindi è console.logpossibile restituire lo stato prima dell'aggiornamento.

Michael Parker menziona il passaggio di una callback all'interno del setState. Un altro modo per gestire la logica dopo il cambio di stato è tramite il componentDidUpdatemetodo del ciclo di vita, che è il metodo raccomandato nei documenti React.

In genere, consigliamo invece di utilizzare componentDidUpdate () per tale logica.

Ciò è particolarmente utile in caso di successiva setStateattivazione e si desidera attivare la stessa funzione dopo ogni cambio di stato. Invece di aggiungere un callback a ciascuno setState, è possibile posizionare la funzione all'interno di componentDidUpdate, con una logica specifica all'interno, se necessario.

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

Potresti provare a usare ES7 async / await. Ad esempio usando il tuo esempio:

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

Fai attenzione ai metodi del ciclo di vita di reazione！

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

Ho lavorato per diverse ore per scoprire che getDerivedStateFromPropsverrà chiamato dopo ogni setState().

😂

async-await la sintassi funziona perfettamente per qualcosa di simile al seguente ...

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

In parole semplici: this.setState ({data: value}) è di natura asincrona, il che significa che si sposta dallo stack di chiamate e ritorna allo stack di chiamate solo se non viene risolto.

Si prega di leggere Event Loop per avere un quadro chiaro della natura asincrona in JS e perché ci vuole tempo per l'aggiornamento -

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

Quindi -

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

come ci vuole tempo per l'aggiornamento. Per ottenere il processo sopra descritto -

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