React JS：setState在上次輸入時間晚了

Question

對不起，如果我無法正確解釋我的問題，因爲英文不是我的 主要語言。

我創建一個表單組件（寫在ES6）是這樣的：

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 
    } 
} 

你看到我做console.log行？現在，當我嘗試在瀏覽器上輸入 ：

// 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: 

請參閱？每個輸入的狀態都遲到一個字符。這對驗證輸入長度的 不好。我在那裏做錯了什麼？或者，我錯過了 的東西？

Answer 1

在setState方法中使用回調。

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

從docs：

第二參數（可選）是一個回調函數，這將是 一次的setState完成執行，並且該組件被重新呈現。

Answer 2

setState不會立即發生變異this.state，可以通到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

發生這種情況，因爲這的console.log之前甚至開始.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 
    }); 
}