Dlaczego wywoływanie metody reagowania setState nie powoduje natychmiastowej mutacji stanu?

Czytam sekcję FormularzeReagujedokumentacja i właśnie wypróbowałem ten kod, aby zademonstrować onChangeużycie ( 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')
);

Kiedy aktualizuję <input/>wartość w przeglądarce, druga console.logczęść handleChangeoddzwaniania drukuje to samo valueco pierwsza console.log, dlaczego nie widzę wyniku this.setState({value: event.target.value})w zakresie handleChangeoddzwaniania?

Z dokumentacji React :

setState()nie mutuje natychmiast, this.stateale tworzy oczekujące przejście stanu. Dostęp this.statepo wywołaniu tej metody może potencjalnie zwrócić istniejącą wartość. Nie ma gwarancji synchronicznego działania połączeń na setStatei połączenia mogą być grupowane w celu zwiększenia wydajności.

Jeśli chcesz, aby funkcja była wykonywana po zmianie stanu, przekaż ją jako wywołanie zwrotne.

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

Jak wspomniano w dokumentacji React, nie ma gwarancji setStatesynchronicznego odpalenia, więc console.logmożesz zwrócić stan przed aktualizacją.

Michael Parker wspomina o przekazaniu oddzwonienia w obrębie setState. Innym sposobem obsługi logiki po zmianie stanu jest componentDidUpdatemetoda cyklu życia, która jest metodą zalecaną w dokumentach React.

Zasadniczo zalecamy zamiast tego użycie componentDidUpdate () dla takiej logiki.

Jest to szczególnie przydatne, gdy mogą być setStateuruchamiane kolejne s, a chcesz uruchomić tę samą funkcję po każdej zmianie stanu. Zamiast dodawać do każdego wywołanie zwrotne setState, możesz umieścić funkcję wewnątrz componentDidUpdate, z określoną logiką w razie potrzeby.

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

Możesz spróbować użyć ES7 async / czekaj. Na przykład używając twojego przykładu:

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

Uważaj na metody cyklu życia reakcji！

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

Pracowałem przez kilka godzin, aby dowiedzieć się, które getDerivedStateFromPropsbędą wywoływane za każdym razem setState().

😂

async-await składnia działa idealnie dla czegoś takiego jak poniżej ...

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

Mówiąc prosto - this.setState ({data: wartość}) ma charakter asynchroniczny, co oznacza, że ​​wychodzi ze stosu wywołań i wraca do stosu wywołań, chyba że zostanie rozwiązany.

Przeczytaj o pętli zdarzeń, aby uzyskać wyraźny obraz natury asynchronicznej w JS i powodów, dla których aktualizacja wymaga czasu -

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

W związku z tym -

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

ponieważ aktualizacja wymaga czasu. Aby osiągnąć powyższy proces -

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