react.js - react 关于this.setState使用时，第一次无法获取数据，第二次获取的数据是第一次触发的疑问

问题描述

问 题

我使用的是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中对应的变量里，但是在触发事件时，出现了第一次点击的时候并没有将数据传递进去，在第二次点击的时候将第一次的数据传递进去了，这个问题该如何解决？

解决方案

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的回调中哦

这篇关于react.js - react 关于this.setState使用时，第一次无法获取数据，第二次获取的数据是第一次触发的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！