Почему React отстает на шаг?

Question

[Дмитрий]

Есть 2 инпута, в которые я ввожу числа, при onChange должна выводится сумма, по дефолту все значения = 0. проблема в следующем: если ввожу "1" в первое поле, то ничего не происходит, если ввожу еще одну единицу, то в результате сложения имею 1, вместо 11. т.е. операция сложения происходит с прошлым значением, если во второе поле ввести 2, то результат будет 11 вместо 13 и т.д. В чем проблема?
сделал вывод значений, которые вводятся в инпуты, тут всё ок. а суммируются значения из прошлого шага. В консоль выводятся тоже старые значения.

var Calc = React.createClass({
          getInitialState: function() {
            return {
              a: 0,
              b: 0,
              result: 0
            };
          },

          setValueA: function(event) {
            var val = event.target.value;
            this.setState({
              a: val
            });

            console.log("a", this.state.a, this.state.b);
            this.doCalc();
          },

          setValueB: function(event) {
            var val = event.target.value;
            this.setState({
              b: val
            });

            console.log("b", this.state.a, this.state.b);
            this.doCalc();
          },

          doCalc: function() {
            var res = parseInt(this.state.a) + parseInt(this.state.b)

            this.setState({
              result: res
            })
          },

          render: function() {
            return (
              <div>
                <input type="text" className="search-field" onChange={this.setValueA} />
                <input type="text" className="search-field" onChange={this.setValueB} />
                <div>
                  {this.state.a}
                  <br/>
                  {this.state.b}
                  <br/>
                  =
                  {this.state.result}
                </div>
              </div>
            );
          }
        });
        ReactDOM.render(
          <div>
            <Calc />
          </div>,
            document.getElementById('content')
        );

Comments

[Антон]

es5 код в 2к17...

[Дмитрий]

Антон: Проблема явно не в этом.

Answer 1

[Александр Манаков]

Ссылка
Там написанно

React does not guarantee that the state changes are applied immediately.

setState() does not always immediately update the component. It may batch or defer the update until later.

Comments

[Дмитрий]

Спасибо.
Но все равно не очень понятно почему на странице выводятся актуальные значения {this.state.a}, а в консоли нет console.log(this.state.a)

в любом случае спасибо, буду искать другое решение

[Александр Манаков]

Я сильно не вчитывался, но думаю, что state меняется ассинхронно. Т.е. можно представить, что под копотом у setState стоит setTimeout(setState, 0).
Т.е. сначала исполняется ваш весь код в setValueA/setValueB, а потом меняется state.

[Александр Манаков]

Вообще там разжевано все-все, что вам надо. Можете либо передавать вторым параметром в setState ваш doCalc, либо запихать его в componentDidUpdate.

[Александр Манаков]

Либо doCalc переписать так, чтобы он юзал не текущее состояние, а предыдущее. Т.е.

this.setState(prevState => {
    result: Number(prevState.a) + Number(prevState .b)
})

[Александр Манаков]

И еще лучше в state сразу пихать числа, а не строки, которые потом в числа переходят. А то где-нибудь забудете перевести и получите ошибку.

[Антон]

можно в рендере вызвать например this.getResult() и все будет ок.

[Александр Манаков]

Я не знаю что за getResult, поэтому ничего не могу сказать =)

[Дмитрий]

Как передавать вторым параметром не понял, а вот "либо запихать его в componentDidUpdate" явно не то, потому что вызывает зацикливание.
Если в рендере вызывать, то ошибки валятся(

Всем спасибо, буду читать доки

[Александр Манаков]

1)

Instead, use componentDidUpdate or a setState callback (setState(updater, callback)),

Т.е. вам надо сделать

this.setState({
    b: val
}, this.doCalc);

2) Так вы не каждый раз вызывайте setState при расчете суммы, а если только сумма у вас отличается =)
3)

Если в рендере вызывать, то ошибки валятся(

так можно не записывать сумму в state, зачем она вам там? Это же дублирование данных.
просто сделайте просуммируйте render и покажите, без всяких записей в state. Имхо это самы лучший вариант.

[Дмитрий]

да, всё ок. Спасибо)