react 在使用数据请求的时候和setState的时候哪个先处理

今天在工作中遇到一个问题,我司使用的是antd 组件,在使用react数据请求时,并在其中设置setState,页面发现了异常.

需求是这样的,

上面的调出项目为一个select选择,当时发生onChange的时候,下面的调出人员会随之改变,两个select是联动的.

我写这一部分需求时的代码如下:

// 初始化需求申请界面数据
initializeMyModal = () => {
  // 当调出项目发生改变时,获取调出人员下拉数据
  myModalItems[0].sub[0].selectOnChange = this.getFromUserInfo;
  
  this.setState({
    myModalItems: myModalItems,
  })
};

// 获取新增页面调出人员
getFromUserInfo = (value) => {
  let params = {
    projectId: value,
  };

  request({url: '/staffDispath/getFromUserInfo', method: 'GET', params: params}).then((resp) => {
    let arr = [];
    resp.ret.map((data, index) => {
      arr.push({value: data.id, text: data.name, jobNumber: data.code})
    });

    myModalItems[0].sub[3].options = arr;
    this.setState({
      myModalItems: myModalItems,
    });
  });
};

当调出项目调用selectOnChange方法时,下面的调出人员也会随之发生变化, 问题来了:当我选择调出人员的一个下拉时: 如图

然后再去调用调出项目的selectOnChange事件,调出人员的位置变成了罗慧的value值,

如图:

这什么原因,我们这边的前端说法是:两个异步的调用,一个异步请求,一个setState,当异步请求的时候,setState也是异步更改数据,当数据请求成功时,便遗留了上一个的value值,这样的解释很牵强,欢迎大神来留言.

我能提供的解决方案:

当调出项目selectOnChange的时候,调用一个同步的方法,把调出人员的select设为空.在antd中可以直接使用this.props.form.setFieldsValue({})即可

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。 ? 皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取...

3155
来自专栏ytkah

html5开发制作,漂亮html5模板欣赏,H5网站建设

html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc、手机等各终端,跨...

5836
来自专栏繁花云

巧用js替换某些不能替换的文字

在运行某些程序时,作者为了保护版权,将版权文字进行了特殊处理,使得我们无法进行修改。

810
来自专栏FreeBuf

Chrome XSS审计之SVG标签绕过

在一年前,在我的私人Twitter账户 brutal secret ,我分享了一个有趣的方法来通过审计绕过chrome 的xss过滤器。我们将从黑盒测试的角度...

3075
来自专栏企鹅号快讯

图片转文字居然这么简单,多亏了这几个神器!

我们经常会用手机拍摄、截屏了一大堆图片,领导的PPT、客户的名片、各种文案海报等等…… 想着有空后把资料整理成文字稿,但是一想到要在电脑上把文字打出来,巨大的工...

7689
来自专栏不止是前端

Vue:基于Vue2的饿了么实战总结

3377
来自专栏ml

JavaWeb学习之环境搭建

 1. HTML(Hyper Text Markup Language) , 超文本标记语言。 HTML文件的后缀名一般是: .htm , .html 表单(f...

2553
来自专栏DeveWork

为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文...

2239
来自专栏前端学习心得

【vue/axios/vue-router】制作一个精致的美团项目

1362
来自专栏黑泽君的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

1063

扫码关注云+社区