Jquery ajax内部循环中的多个ajax调用成功

下面代码的问题是在完成rest调用之前首先呈现组件，所以DOM是空的。第二个ajax-in循环将触发50次，因为一个管理器下有50个直接报告对象。第二个ajax调用是获取直接报告对象的显示名称，因为第一个ajax调用只在data.d.DirectReports.results中提供电子邮件。那么，如何首先完成所有ajax调用，然后呈现组件以在DOM中显示数据呢

public componentDidMount(){
    this.getReportees();
}
getReportees = () => {
    var reportees = [];
    var reactHandler = this;
    var drReportess = [];
    $.ajax({
      url: this.siteUrl+"/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + encodeURIComponent(accountName) + "'&$select=DirectReports",
      method: "GET",
      headers: { "Accept": "application/json; odata=verbose" }
    }).done((data)=>{
      let length: Number = data.d.DirectReports.results.length > 0 ? data.d.DirectReports.results.length : 0;
      if(length>0){
        $.each(data.d.DirectReports.results, function (i, value: string) {
          reportees.push(value);
        });
        $.each(reportees,function(i,value){
          $.ajax({
            url:  this.siteUrl+"/_api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor(accountName=@v,propertyName='PreferredName')?@v='" + encodeURIComponent(value) + "'",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" }
          }).done((data)=>{
            drReportess.push({
              DisplayName: data.d.GetUserProfilePropertyFor,
              LoginName: value
            })
          })
        })
        reactHandler.setState({
          directReportees: drReportess
        })
        console.log(reactHandler.state.directReportees);
      } 
    })
  }
public render(): React.ReactElement<IDashboardProps> {
   console.log('Render');
   return(
   <table className="ms-Table course-table">
      <thead>
         <tr>
            <th>Team Members</th>
         </tr>
      </thead>
      <tbody>
      {this.state.directReportees && this.state.directReportees.map((item, i) => {
       return [
          <tr>
              <td>{item.DisplayName}</td>
           </tr>
        ]
       })}
       </tbody>
   </table>
);
}

公共组件didmount（）{
这个.getReportees（）；
}
getReportees=（）=>{
var报告对象=[]；
var reactHandler=this；
var drReportess=[]；
$.ajax({
url:this.siteUrl+“/”api/SP.UserProfiles.PeopleManager/GetPropertiesFor（accountName=@v）？@v='“+encodeURIComponent（accountName）+“&$select=DirectReports”，
方法：“获取”，
标题：{“接受”：“应用程序/json；odata=verbose”}
}).完成（（数据）=>{
让长度：Number=data.d.DirectReports.results.length>0？data.d.DirectReports.results.length:0；
如果（长度>0）{
$.each（data.d.DirectReports.results，function（i，value:string）{
报道对象。推送（价值）；
});
$。每个（报告对象、功能（i、值）{
$.ajax({
url:this.siteUrl+“/”api/SP.UserProfiles.PeopleManager/GetUserProfilePropertyFor（accountName=@v，propertyName='PreferredName'）？@v='+encodeURIComponent（value）+'，
方法：“获取”，
标题：{“接受”：“应用程序/json；odata=verbose”}
}).完成（（数据）=>{
推送({
DisplayName:data.d.GetUserProfilePropertyFor，
登录名：值
})
})
})
reactHandler.setState({
直接报告对象：drReportess
})
log（reactHandler.state.directReportees）；
} 
})
}
public render（）：React.ReactElement{
console.log（'Render'）；
返回(
团队成员
{this.state.directReportees&&this.state.directReportees.map（（项，i）=>{
返回[
{item.DisplayName}
]
})}
);
}

---

首先是呈现（console.log），然后是加载数据，所以表是空的。

为什么不在循环之前清除状态的

directReportees

数组，并让Ajax调用在完成时将每个报告对象附加到状态（通过

setState（）

）？这样一来，结果是否异步输入就无关紧要了。@kmoser：你的意思是说在循环内的done函数中推送setState（）？我已经试过了，没用。没用就是没用？或者给出一个错误？对不起，我的意思是，即使将setstate（）放在done函数中，结果也是一样的，dom是空的，而ajax在dom加载后完成public render（）：React.ReactElement{console.log（“render”）；return（）}````。这里首先是控制台日志中的渲染，然后是this.state.directReportees。