我现在是这么干的:
1、在一个Component中给state来做一个初始值,比如:
this.state = {
data:null
}
2、在componentDidMount异步加载数据,然后setState
3、render里面,时候判断this.state.data,
如果==null,表示还未加载成功
如果!=null,表示已经加载完成
这样做其实对加载一个异步数据的时候还好使。
但是如果我需要加载2个异步数据,发起两次请求。
那我是该如何做到等待2个异步数据全部加载完成以后在进行setState
如果两个异步相互之间没有依赖的话,那直接两次setState就可以了呀。
哪个数据回来了就显示哪个数据就行了。跟你一次是一样的处理。
如果两个数据的显示 有依赖的话,那就先把结果缓存起来,等两次都结束才setState,或者直接用promise.all
1、不推荐在componentDidUpdate里面执行setState,参考eslint-config-airbnb规则中:
// Prevent usage of setState in componentDidUpdate
'react/no-did-update-set-state': 2,
2、多个异步请求 都 获取数据后执行操作 可以采用:
1)在第一个异步请求的回调中发起第二个请求,在第二个请求的回调中调用setState
:
$.get().done(function() {
// 此处可写异步请求
}).fail(function() {
// 此处可写异步请求
});
2)类似题主举例的方法,在每一个异步请求的回调中调用setState
,修改一个对应的标识,最后在render中判断标识是否为真
// getInitialState
getInitialState() {
return {
tag1: false,
tag2: false
}
},
// 渲染dom之前请求数据,或在getInitialState时请求
componentWillMount() {
this.ajax1();
this.ajax2();
},
ajax1() {
const self = this;
$.get().done(function() {
// 此处设置第一个参数为真
self.setState({
tag1: true
});
});
},
ajax2() {
const self = this;
$.get().done(function() {
// 此处设置第一个参数为真
self.setState({
tag2: true
});
});
},
render() {
cosnt ajaxTags = this.state.tag1 && this.state.tag2;
return (<div>{ajaxTags}</div>);
}
链式请求是阻塞的,时间会加长;非阻塞的做法多执行了一次setState,但是时间变少
如有错误,请求指正