React JS：最後の入力時にsetStateが遅い

Question

英語が私の メイン言語ではないため、問題を正しく説明できない場合は申し訳ありません。あなたは、私がconsole.logを行うラインを参照してください

class Form extends React.Component { 
    constructor(...args) { 
    super(args); 
    this.state = { input: '' }; 
    } 

    render() { 
    return (
     <form> 
     <input 
      type="text" 
      onChange={this.onInputChange.bind(this)} 
     /> 
     </form> 
    ); 
    } 

    onInputChange(e) { 
    this.setState({ input: e.target.value }); 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    } 
} 

：

私はこのようなものを（ES6で書かれた）フォーム・コンポーネントを作成しますか？今、ブラウザに何か と入力しようとすると、次のようになります。

// I type this: my word 
// on every character input, the output is: 

// state: , value: m 
// state: m, value: my 
// state: my, value: my 
// state: my , value: my w 
// state: my w, value: my wo 
// state: my wo, value: my wor 
// state: my wor, value: my word 

// I do backspace 
// state: my word, value: my wor 
// state: my wor, value: my wo 
// state: my wo, value: my w 
// state: my w, value: my 
// state: my , value: my 
// state: my, value: m 
// state: m, value: 

状態は各入力に1文字遅れています。これは、 の入力長の検証には適していません。私は何を間違えたのですか？または、私は 何かが恋しいですか？

Answer 1

setStateメソッドでコールバックを使用します。 docsから

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
     console.log(`state: ${this.state}, value: ${e.target.value}`); 
    }); 
} 

：

秒（オプション）のパラメータは、SETSTATEが完了し、部品は再レンダリングされた後 に実行されるコールバック関数です。

Answer 2

setStateはすぐthis.stateを変化させません。にconsole.logもこの前に開始するので、あなたはこれが起こった2番目の引数としてsetStateコールバックに渡すと

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // this is my checking 
    }); 
} 

Example

Answer 3

更新された状態を得ることができます.setStateはそのアクションを完了しました。コールバックでconsole.logを渡す必要があります。これはthis.setStateが完了した後にのみ呼び出されることを保証します。

onInputChange(e) { 
    this.setState({ input: e.target.value },() => { 
    console.log(`state: ${this.state}, value: ${e.target.value}`); // the console message code 
    }); 
}