我使用的是antd组件,

compareClickFn(orderCodes, fileNames) {
printLog("orderCodes----------"+ orderCodes);
printLog("fileNames----------"+ fileNames);
this.setState({
show: !this.state.show,
orderCode: orderCodes,
fileName: fileNames,
});
printLog("orderCode and fileName------"+ this.state.show + "----" + this.state.fileName);
const ShowAnim = document.getElementById('ShowAnim');
if (this.state.show === false) {
ShowAnim.style.display = 'block';
this.state.type = 'primary';
} else {
ShowAnim.style.display = 'none';
this.state.type = 'ghost';
}
}

这段代码是<Button>组件的onclick事件函数,其中orderCoder和fileName已经获取到了,我想要将这些值保存进入this.state中对应的变量里,但是在触发事件时,出现了第一次点击的时候并没有将数据传递进去,在第二次点击的时候将第一次的数据传递进去了,这个问题该如何解决?

 

4个回答

答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问
已采纳

setState其实并不是异步的,它在整个执行过程中没有任何的setTimeout或者promise等异步操作。

你可以尝试下在setTimeout(或者自己绑定的DOM事件,但是不要在JSX中绑定事件哦,要自己手动addEventListener,目的就是摆脱React的控制)中调用setState(newState)方法,然后紧接着log看下你设置的新的state有没有起作用呢?如果再仔细一些,你还可以研究下这次的setState、render、log的执行顺序是怎样的呢?

不要被setState的名字欺骗了,它其实是 set pending state —— 将你传入的newState放入一个待更新的队列,到此为止你的setState方法基本已经完成了它所有的工作。

真正执行state合并更新的另有其人 —— transaction,对于React的transaction网上有相应的讲解,在这里不再赘述,有兴趣可以看下Transaction源码以及ReactUpdates源码

setTimeout中setState和在生命周期里setState的区别在于,setTimeout中的setState会自己触发一个transaction,而生命周期中的setState已经处于React生命周期的transaction中了。

最后:如果想在newState起效后执行一些处理,最好还是放在setState的回调中哦

答案对人有帮助,有参考价值2答案没帮助,是错误的答案,答非所问

this.setState是异步的,所以你一呼叫this.setState完,马上作获取this.state中的值,不一定能获取得到改变的值。

1. 用this.setState的第二参数,给一个回调来在更新后执行,例如:

this.setState({ something: true }, () => console.log(this.state))

2. 用componentDidUpdate()这个生命周期方法,把确定更新后要作的代码放里面。

3. mobx有神奇的@observer@observable可以作这事。

@observer class Select extends React.Component {
@observable selection = null; /* MobX managed instance state */ constructor(props, context) {
super(props, context)
this.selection = props.values[0]
}
//...

上面代码取自这篇文章的里: https://medium.com/@mweststra...


以下是补充"为何说setState是异步的?"的回答

setState并非使用setTimeout或promise的那种进入到事件回圈(Event loop)的异步执行,但它的执行行为在React库中控制时,的确是异步的。以最精确的说法来说,"它不是保证同步的",官方的说明也是如此。

setState包含在其中执行过程是一个很复杂的过程,从最初的版本到现在,也有无数次的修改。它的工作除了要设定this.state之外,还要负责触发重渲染,这里面需要经过React核心中演算法,也就是virtual DOM的演算,最终才能决定是否要进行重渲染,以及如何渲染。为了批次与效能的理由,多个setState呼叫有可能在过程中要进行合并,所以它被设计以异步来执行是合理的,但这主要限于在React库的控制之中。

那么setState会在何时以同步的方式来执行,也就是立即更动this.state?答案是在React函式库控制之外时,它就会以同步的方式来执行,在下面两篇文章中,都有类似的例子:

但大部份的使用情况下,我们都是使用了React库中的表单控件,例如select, button,这些是React库中人造的控件与事件,是处于React库的控制之下,setState就会以异步的方式执行。所以一般来说,我们会认为setState就是异步执行,并不是用源代码来看说它是不是有使用setTimeout或Promise之类的方式转为JS的异步执行方式,而是以它在React库的控制之下,以执行行为与顺序来理解。

以下是翻译自官方setState源码的注解,其实如果是官网的说明也是类似的说明:

不保证this.state会立即更新,所以在调用这个方法后存取this.state可能会回传旧的值。

不保证调用setState就会同步地执行,而它们也可能最终被被批量调用(多次调用的情况下)。你可以提供额外的回调,回调将会在setState实际被完成时被执行。

答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问

和 antd 没关系。

setState 是异步的:https://facebook.github.io/re...

答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问

在setState回调里写要做的事情

引用原文:https://segmentfault.com/q/1010000007343714

写博客是为了记住自己容易忘记的东西,另外也是对自己工作的总结,文章可以转载,无需版权。希望尽自己的努力,做到更好,大家一起努力进步!

如果有什么问题,欢迎大家一起探讨,代码如有问题,欢迎各位大神指正!

react 关于this.setState使用时,第一次无法获取数据,第二次获取的数据是第一次触发的疑问的更多相关文章

  1. jqueryUI中datepicker的使用,解决与asp.net中的UpdatePanel联合使用时的失效问题

    1.jqueryUI的datepicker的使用 -->首先在jqueryUI官网上根据你的需要下载适合你系统主题的样式,jqueryUI主题下载地址: -->下载后的文件 jquery- ...

  2. [React技术内幕] setState的秘密

    对于大多数的React开发者,setState可能是最常用的API之一.React作为View层,通过改变data从而引发UI的更新.React不像Vue这种MVVM库,直接修改data并不能视图的改 ...

  3. Cookie使用时需要注意个数及大小限制

    各浏览器对Cookie有一定的限制,在使用时需要格外注意. 各浏览器之间对cookie的不同限制:   IE6.0 IE7.0/8.0/9.0+ Opera FF Safari Chrome cook ...

  4. EntityFrameWork 使用时碰到的小问题

    EntityFrameWork 使用时碰到的小问题 1,在使用orm访问数据库的相目里,也要引用EntityFrameWork.dll,否则无法使用orm 否则,编译错误 错误 5 "Sys ...

  5. MySQL 安装和启动服务,“本地计算机 上的 MySQL 服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。”

    MySQL 安装和启动服务,以及遇到的问题 MySQL版本: mysql-5.7.13-winx64.zip (免安装,解压放到程序文件夹即可,比如 C:\Program Files\mysql-5. ...

  6. MaterialCalendarView使用时遇到的问题

    一.概述 MaterialCalendarView是一个开源项目.功能强大支持多选.单选.标注等. 二.问题 1.其继承自ViewGroup,故与CalendarView半毛钱关系都没有,完全是一个新 ...

  7. [备忘][转]rsync使用时的常见问题

    sync使用时的常见问题: 错误1: rsync: read error: Connection reset by peer (104) rsync error: error in rsync pro ...

  8. 小白学数据分析----->移动游戏的使用时长分析

    写下该文章,是因为之前看到了几款游戏一个典型的玩家刺激活动,在<多塔联盟>,<萌江湖>等多款游戏的设计中都有体现,如下图所示: 这个功能点的设计,今天在这里讲的更多的还是跟数据 ...

  9. VS2010 使用时选择代码或双击时出错,点击窗口按钮后VS自动重启问题

    VS2010 使用时选择代码或双击时出错崩溃,点击窗口按钮后VS自动重启问题 下载补丁,打上补丁之后,重启电脑,解决了问题. WindowsXP的下载地址:Windows XP 更新程序 (KB971 ...

随机推荐

  1. jenkins配置svn、gradle、ssh

    1.先说下实现的效果,从svn拉取代码.调用gradle编译构建.将构建包分发到部署服务器并备份原来的部署包: 2.直接从http://mirrors.jenkins-ci.org/war/lates ...

  2. django数据库读写分离,分库

    读写分离 在settings中配置不同名称的数据库连接参数,并配置一条数据库选择路由 DATABASES = { 'default': { 'ENGINE': 'django.db.backends. ...

  3. AVA 8 :从永久区(PermGen)到元空间(Metaspace)

    你注意到了吗?JDK 8早期可访问版本已经提供下载了,java 开发人员可以使用java 8 提供的新的语言和运行特性来做一些实验.其中一个特性就是完全的移除永久代(Permanent Generat ...

  4. call to unavailable function system not available on ios 解决方案

    编译时报错:call to unavailable function system not available on iOS 原因:iOS11已经将system删除 解决方案:system(comma ...

  5. Oracle数据库 number 长度与 Short Integer Long BigDecimal 对应关系

    转自:https://blog.csdn.net/edward9145/article/details/21398657 Oracle数据库 number 长度与 Short Integer Long ...

  6. linux ftp 上传与下载命令解析

    month=`date -d "last month" +"%Y%m"` year=`date +"%Y"` rm /home/yourDi ...

  7. 微信公众号 订单 待发货-配送中-已收货 logic

    w function logistics_sameorder($logistics) { $arr = array(); $tmp_wxout_trade_no = ''; $w = 0; $wi = ...

  8. 初探runtime

    1 简介 runtime,也叫它运行时系统.它是用c写的一套API,oc代码底层实现全都依赖它.我们说它是运行时,是相比编译,在程序编译完成之后,一些对象可通过runtime来干一些在编译时看似不可能 ...

  9. SQL 时间函数 Datepart()与DateName()

    1.Datepart() 返回代表指定日期的指定日期部分的整数 语法 Datepart(datepart,date) 返回类型 int datepart: 日期部分 缩写 year yy, yyyy ...

  10. Feature Pyramid Networks for Object Detection

    Feature Pyramid Networks for Object Detection 特征金字塔网络用于目标检测 论文地址:https://arxiv.org/pdf/1612.03144.pd ...