前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react 在使用数据请求的时候和setState的时候哪个先处理

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

作者头像
杭州前端工程师
发布2018-06-15 11:50:29
1K0
发布2018-06-15 11:50:29
举报
文章被收录于专栏:前端大白专栏

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

需求是这样的,

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

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

代码语言:javascript
复制
// 初始化需求申请界面数据
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({})即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档