setState方法異步轉同步

我們使用的setState方法是異步請求,有的時實際的值會和我們預期不一致。
例如:

  onChange(event) {
    console.log(event)
    this.setState({money: event}
    })
<InputItem
            type="number"
            extra={this.state.extra}
            value={this.state.money}
            onChange={this.onChange.bind(this)}
          > 

在這個代碼片段中,我們通過onChange方法想拿到輸入框輸入的值,但是用console打印這個值的時候我們發現:值總是比我們實際輸入的慢一位(我們輸入1234 , console出來的是123)
這個現象就是setState的異步處理造成的,為了解決這個問題,我們將onChange方法改為

onChange(event) {
    console.log(event)
    this.setState({money: event}, function () {
      this.stateFunction()
    })

這樣我們console出來的值就跟我們實際輸入的一致了,通過一個回調函數就能輕松讓setState變為同步。
cool~~~~~~~~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原教程內容詳見精益 React 學習指南,這只是我在學習過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,860評論 1 18
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,951評論 19 139
  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2 17
  • 數月前,Facebook 對外宣布了正在開發的 React Native 框架,這個框架允許你使用 JavaScr...
    木易林1閱讀 1,205評論 0 1
  • 研究方法 1、可用性測試 描述:可用性測試是聚焦于界面特定功能的結構化訪談,關注人們如何使用產品完成特定任務。適用...
    ux2017閱讀 1,943評論 0 7