react 在使用数据请求的时候和setState的时候哪个先处理
为什么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方法时,下面的调出人员也会随之发生变化, 问题来了:当我选择调出人员的一个下拉时: 如图
然后再去调用调出项目的selectOnChange事件,调出人员的位置变成了罗慧的value值,
如图:
这什么原因,我们这边的前端说法是:两个异步的调用,一个异步请求,一个setState,当异步请求的时候,setState也是异步更改数据,当数据请求成功时,便遗留了上一个的value值,这样的解释很牵强,欢迎大神来留言.
我能提供的解决方案:
当调出项目selectOnChange的时候,调用一个同步的方法,把调出人员的select设为空.在antd中可以直接使用this.props.form.setFieldsValue({})即可
转载于:https://my.oschina.net/kaykie/blog/1553006
以上是 react 在使用数据请求的时候和setState的时候哪个先处理 的全部内容, 来源链接: utcz.com/z/382269.html