Чому виклик методу реакції setState не змінює стан одразу?

Я читаю розділ " Форми "reactjsдокументація та щойно спробував цей код для демонстрації onChangeвикористання ( 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')
);

Коли я оновлюю це <input/>значення у браузері, друге console.logвсередині handleChangeзворотного дзвінка друкує те саме value, що і перше. console.logЧому я не бачу результату this.setState({value: event.target.value})в області handleChangeзворотного дзвінка?

З документації React :

setState()не мутує відразу, this.stateале створює перехід у стан очікування. Доступ this.stateпісля виклику цього методу потенційно може повернути наявне значення. Немає гарантії синхронної роботи дзвінків на setStateдзвінки, а виклики можуть збиратися для підвищення продуктивності.

Якщо ви хочете, щоб функція виконувалася після зміни стану, передайте її як зворотний виклик.

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

Як зазначено в документації React, немає гарантії, що setStateвона буде синхронізована, тому ви console.logможете повернути стан перед оновленням.

Майкл Паркер згадує про зворотний виклик у межах setState. Інший спосіб управління логікою після зміни стану - це componentDidUpdateметод життєвого циклу, який є методом, рекомендованим у документах React.

Як правило, ми рекомендуємо замість цього використовувати компонентDidUpdate () для такої логіки.

Це особливо корисно, коли можуть бути послідовні setStateзвільнення, і ви хочете запускати ту саму функцію після кожної зміни стану. Замість того, щоб додавати зворотний дзвінок до кожного setState, ви можете розмістити функцію всередині componentDidUpdate, із певною логікою всередині.

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

Ви можете спробувати використовувати ES7 async / await. Наприклад, використовуючи ваш приклад:

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

Слідкуйте за методами життєвого циклу реакції！

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

Я працював кілька годин, щоб дізнатися, що getDerivedStateFromPropsбудуть називатися після кожного setState().

😂

async-await синтаксис відмінно працює для чогось такого, як:

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

Простіше кажучи - this.setState ({data: value}) має асинхронний характер, що означає, що він виходить зі стеку викликів і повертається лише до стеку викликів, якщо це не вирішено.

Будь ласка, прочитайте про цикл подій, щоб мати чітке уявлення про асинхронну природу в JS та чому потрібен час на оновлення -

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

Звідси -

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

оскільки потрібен час для оновлення. Для досягнення вищезазначеного процесу -

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