Javascript 关于componentDidMount的几个请求

我有一个React应用程序，有一个父组件和三个子组件。在父组件中，我拥有包含数据的状态，并将这些数据以道具形式传递给子组件。我还有三个端点，必须在父组件的componentDidMount函数上发送三个ajax请求。如何在反应中做到这一点

var Parent = React.createClass({
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },
    componentDidMount: function() {
        ???
        ???
        ???
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
})

var Child1 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

var Child2 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

var Child3 = React.createClass({
    render: function() {
        return (
            <div>
                {this.props.data}   
            </div>
        )
    }
})

var Parent=React.createClass({
getInitialState:函数（）{
报税表（{
数据1:[]，
数据2:[]，
数据3:[]
});
},
componentDidMount:function（）{
???
???
???
},
render:function（）{
返回(
)
}
})
var Child1=React.createClass({
render:function（）{
返回(
{this.props.data}
)
}
})
var Child2=React.createClass({
render:function（）{
返回(
{this.props.data}
)
}
})
var Child3=React.createClass({
render:function（）{
返回(
{this.props.data}
)
}
})

我想用叠加“加载…”呈现父组件，在componentDidMount上发送3个请求，更新状态并将数据作为道具传递给子组件，前提是所有3个请求都成功完成，然后呈现/重新呈现这些子组件。如果一个请求有问题，我不想呈现任何子组件（加载…将一直进行，直到成功）。异步还是前一个请求成功

---

提前谢谢。

像这样的东西可以用。ajax调用是伪代码。我假设您正在使用一些ajax api库在本例中，我使用superagent（不带额外的promise库，而只使用es6 promise）。 我使用map with Promise.all-基本上，我们等待所有ajax请求返回。。在“then”中，我用结果更新状态。一旦promise.all被解析，它将按照您发出请求的顺序传递一个包含每个请求的数组。在“ajaxApi”中，这些是api调用。我希望这有帮助

注意：我在这里假设es6，因此我使用promise.all和一些es6 shorthan。如果您没有使用es6，我道歉。让我知道，我可以展示一个非es6解决方案

var Parent = React.createClass({
    getDefaultProps: function() {
        return {
          ajaxApi: ['foo1','foo2','foo3']
        };
    },
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },
    componentDidMount: function() {
      Promise.all(this.props.ajaxApi
        .map(a => {
            return new Promise((resolve, reject) => {
                //using superagent here (w/o its promise api), "import request as 'superagent'. You'd import this at the top of your file.
                request.get(a)
                  .end((error, response) => {
                    if (error) {
                      return resolve(response)
                    } else {
                      resolve()
                    }
               })
            })
        )
        .then(v => {
            this.setState({
              data1: v[0],
              data2: v[1],
              data3: v[2]
            })
        })
        .catch(() => {
            console.error("Error in data retrieval")
        })
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
})

var Parent=React.createClass({
getDefaultProps:function（）{
返回{
ajaxApi:['foo1'，'foo2'，'foo3']
};
},
getInitialState:函数（）{
报税表（{
数据1:[]，
数据2:[]，
数据3:[]
});
},
componentDidMount:function（）{
Promise.all（this.props.ajaxApi
.map（a=>{
返回新承诺（（解决、拒绝）=>{
//在这里使用superagent（没有它的promise api），“将请求作为‘superagent’导入。您可以在文件顶部导入它。
请求。获取（a）
.end（（错误、响应）=>{
如果（错误）{
返回解析（响应）
}否则{
解决（）
}
})
})
)
.然后（v=>{
这是我的国家({
数据1:v[0]，
数据2:v[1]，
数据3:v[2]
})
})
.catch（（）=>{
控制台错误（“数据检索错误”）
})
},
render:function（）{
返回(
)
}
})

//这是一个没有es6的Axios版本。我在这里做一些假设。我希望您能适应自己的需要

var Parent = React.createClass({
    // these are your api calls
    getDefaultProps: function() {
        return {
          ajaxApi: ['api/call/1','api/call/2','api/call/3']
        };
    },
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },

    fetchApiCallData: function(api) {
        return axios.get(api);
    },

    componentDidMount: function() {
       axios.all(this.props.ajaxApi.map(function(api) {
           fetchApiCallData(api)
       })).then(axios.spread(function(req1, req2, req3) {
        // requests complete
           this.setState({
              data1: req1,
              data2: req2,
              data3: req3
            })
       }));
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
   })

var Parent=React.createClass({
//这些是您的api调用
getDefaultProps:function（）{
返回{
ajaxApi:['api/call/1'、'api/call/2'、'api/call/3']
};
},
getInitialState:函数（）{
报税表（{
数据1:[]，
数据2:[]，
数据3:[]
});
},
fetchApiCallData:函数（api）{
返回axios.get（api）；
},
componentDidMount:function（）{
axios.all（this.props.ajaxApi.map）（函数（api）{
获取APICALLDATA（api）
})).然后（轴向排列（功能）（需求1、需求2、需求3）{
//请求完成
这是我的国家({
数据1:req1，
数据2:req2，
数据3:req3
})
}));
},
render:function（）{
返回(
)
}
})

Show as your code..例如，您可以使用这个库：您可以进行嵌套的ajax调用。

call1.success（call2.success（call3.success（setState）））

如果您正在寻找并行性。

successCount=0；call1.success（successCount++）；If（successCount==3）setState（）；

我在寻找并行性，但为了使此功能有效，我想同时处理所有请求。哇，这让我头脑清醒了：）您能为我展示es5解决方案吗？es6仍在进行中。非常感谢。我将axios用作ajax apiok，我添加了axios版本。我希望它能有所帮助。它没有经过测试，但我认为这应该会让您走上正轨。