React-App: Prop обновляется после следующего события

Question

Я сделал этот «Конвертер валют», чтобы получить представление о том, как работает React.

Он работает (более или менее), но результат показан со смещением:

Вы типа «1» (Евро) => Он показывает «0» доллар.

Вы печатаете «10» => Он показывает «1.1308 Доллар».

Вы печатаете «100» => Он показывает «11,308 доллара».

...

var Display = React.createClass({ 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <p>{this.props.euro + ' Euro are equal to ' + this.props.dollar + ' Dollar.'}</p> 
 
     </div> 
 
    ) 
 
    } 
 
}); 
 

 
var Converter = React.createClass({ 
 
    getInitialState: function() { 
 
    return { euro: 0, dollar: 0, exchangeRate: 1.1308 } 
 
    }, 
 
    convertEuroToDollar: function() { 
 
    this.setState({ euro: +document.querySelector('#amount-euro').value }); 
 
    this.setState({ dollar: this.state.euro * this.state.exchangeRate }); 
 
    }, 
 
    render: function() { 
 
    return (
 
     <div> 
 
     <input type="text" id="amount-euro" onKeyUp={this.convertEuroToDollar} /> 
 
     <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} /> 
 
     </div> 
 
    ) 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <Converter />, 
 
    document.querySelector('#app') 
 
);

div { 
 
    margin: 30px 50px; 
 
}

<div id="app"></div>

Live-Demo на CodePen: http://codepen.io/mizech/pen/vGbJxe

Он должен показывать результат (евро * exchangeRate) сразу.

Что я здесь делаю неправильно?

Answer 1

Вызов двух установокStates в конце концов, вы не правильно установили состояние euro.
Будучи async, вы все еще использовали старое значение.

Из документов:

SetState() не сразу мутировать this.state но создает состояние отложенного перехода. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

https://facebook.github.io/react/docs/component-api.html

Чтобы решить эту проблему, сделайте следующее:

convertEuroToDollar: function() { 
    const euro = +document.querySelector('#amount-euro').value 
    this.setState({ 
    euro: euro, 
    dollar: euro * this.state.exchangeRate 
    }); 
}, 

Fixed пример: http://codepen.io/FezVrasta/pen/xVeMMX

Вторая проблема, которую я вижу, это было бы гораздо лучше использовать ref вместо document.querySelector.

convertEuroToDollar: function() { 
    const euro = +this.refs.amountEuro.value; 
    this.setState({ 
    euro: euro, 
    dollar: euro * this.state.exchangeRate 
    }); 
}, 
render: function() { 
    return (
    <div> 
     <input type="text" ref="amountEuro" onKeyUp={this.convertEuroToDollar} /> 
     <Display dollar={this.state.dollar} euro={this.state.euro} exchangeRate={this.state.exchangeRate} /> 
    </div> 
) 
}