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 条评论
登录 后参与评论

相关文章

来自专栏州的先生

在GUI窗口中绘制一个茅台股票K线图

1762
来自专栏IMWeb前端团队

Iconfont在教育平台的实践

本文作者:IMWeb bleanycao 原文出处:IMWeb社区 未经同意,禁止转载 Iconfont 体系化解决方案 背景 性能优化是前端开发不得...

1877
来自专栏非著名程序员

推荐几个比较好的开源项目和开源库

? 最近比较忙,北京天气又很闷热,没有太写文章,公众号后台经常有人问:为什么这几天没推送?说实话,确实有点忙,天太热而且身体有些不舒服,还请大家见谅。今天推送...

21710
来自专栏我的博客

flash和div层次关系

<param name=”WMODE” value=”transparent”> <param name=”wmode” value=”Opaque”> <pa...

2946
来自专栏.Net移动开发

Smobiler 4.4 更新预告 Part 1(Smobiler能让你在Visual Studio上开发APP)

在4.4版本中,大家对产品优化的一些建议和意见进行了相应的优化和修复,同时,还新增了一些令人激动的功能和插件。

823
来自专栏项勇

Android 8.0 “奥利奥”正式发布

1404
来自专栏腾讯大讲堂的专栏

iOS 9对前端做了什么?

作者:big(谢刚),腾讯TGideas团队前端工程师,前端虐我千万遍,我待前端如初恋! 随着9月25日iPhone6s的发货,早已预订入手的小伙伴已开始了新一...

2106
来自专栏王大锤

iOS各种调试技巧豪华套餐

3659
来自专栏Vamei实验室

安卓第三夜 概念漫游(上)

拿起一个手机,总是满屏的应用图标。点击图标,选择应用,玩一把游戏,刷一下微博,写一篇日记。“叮咚”一声,邮件应用提醒有一封新来的邮件。在安卓里,眼花缭乱的应用承...

1858
来自专栏速成应用小程序开发平台

新手教程|速成应用教你如何制作搭建自己的微信小程序

微信小程序已经迈入了爆发阶段,很多中小企业和商户正在不断涌入这个市场。但是很多不懂技术不懂代码的小白却不知道去哪里制作微信小程序,现在就以可视化小程序开发工具「...

5765

扫码关注云+社区