reactjs中如何预加载的数据？

Question

我现在是这么干的：
1、在一个Component中给state来做一个初始值，比如：
this.state = {
data:null
}
2、在componentDidMount异步加载数据，然后setState
3、render里面，时候判断this.state.data，
如果==null,表示还未加载成功
如果!=null,表示已经加载完成

这样做其实对加载一个异步数据的时候还好使。

但是如果我需要加载2个异步数据，发起两次请求。
那我是该如何做到等待2个异步数据全部加载完成以后在进行setState

Answer 1

如果两个异步相互之间没有依赖的话，那直接两次setState就可以了呀。

哪个数据回来了就显示哪个数据就行了。跟你一次是一样的处理。

如果两个数据的显示 有依赖的话，那就先把结果缓存起来，等两次都结束才setState，或者直接用promise.all

Answer 2

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，但是时间变少

如有错误，请求指正