React：状態更新の遅延

Question

次のコードを検討してください。私は、テキストフィールドのテキストの最後の文字をlastCharという状態で保存しておきたい。これを行うには、次のコードを実行しましたか？例えば

define(["react","react-keydown"], (React,keydown) => { 

    var TypingContainer = React.createClass({ 
    getInitialState: function() { 
     return {text: '',lastChar:''}; 
    }, 
    handleChange: function(e) { 


      console.log('lastChar typed is:'+ e.target.value.slice(-1)); 

      this.setState({lastChar: e.target.value.slice(-1)}); 

      console.log('lastChar in state is:'+ this.state.lastChar); 


    } 

     , 
    render: function() { 
     return(
     <div> 
      {this.props.candidateWord} 
      {this.props.message} 
      <input 
       className="typing-container" 
       value={this.state.message} 
       onChange={this.handleChange} 



      /> 

     </div> 
    ); 
    } 
    }) 
    return TypingContainer; 
}); 

は、ユーザタイプhelloが、私はその間lastCharo

として両方e.target.value.slice(-1)とthis.state.lastChar同じで最後の文字を見ることが予想される場合は、lastCharは常に他の言葉でl

を示し正確な値の前に1つのchar？

どうしてですか？どのように私はそれを修正することができますか？

Answer 1

setState（）を呼び出した直後に更新されたstateの値は取得されません。これは、setState()と呼ばれるとすぐに、ビューが再レンダリングされるためです。だから、レンダリング内の更新された値をチェックする方が良いでしょう。

render: function() { 
    console.log('lastChar in state is:'+ this.state.lastChar); 
     return(
     <div> 
      {this.props.candidateWord} 
      {this.props.message} 
      <input 
       className="typing-container" 
       value={this.state.message} 
       onChange={this.handleChange} 
      /> 

     </div> 
    ); 
    } 

あるいは、

this.setState({ 
    lastChar: e.target.value.slice(-1)},()=> { 
    console.log(this.state.lastChar) 
});