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

最新推荐文章于 2024-10-16 09:32:06 发布

转载最新推荐文章于 2024-10-16 09:32:06 发布 · 885 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/kaykie/blog/1553006

文章标签：

#javascript #前端 #ViewUI

本文描述了一个React应用中使用antd组件库时遇到的Select组件联动问题。当一个Select组件变化时，另一个Select组件的数据需要更新，但由于异步操作导致了数据状态异常。文章提供了详细的代码示例及解决方案。

为什么80%的码农都做不了架构师？>>>

今天在工作中遇到一个问题,我司使用的是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方法时,下面的调出人员也会随之发生变化, 问题来了:当我选择调出人员的一个下拉时: 如图