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,879评论 1 18
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,253评论 19 139
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,963评论 2 17
  • 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScr...
    木易林1阅读 1,216评论 0 1
  • 研究方法 1、可用性测试 描述:可用性测试是聚焦于界面特定功能的结构化访谈,关注人们如何使用产品完成特定任务。适用...
    ux2017阅读 1,957评论 0 7