Почему вызов метода реагирования 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.

Обычно мы рекомендуем использовать componentDidUpdate () для такой логики.

Это особенно полезно, когда могут быть 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);
    });