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({})即可 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |