Reactjs 组合多个JSON获取响应，呈现问题

在帮助台上使用api，这让我对react和正确显示数据感到有些痛苦

我有一个函数（最终将是一个自定义钩子）来处理对api的所有请求

     async function callApi(apiAction, apiMethod) {
        url=baseApiUrl + apiAction;
        const response = await fetch(url, {
         method: apiMethod,
         headers: {
           'Authorization': 'Bearer ' + token,
           'Content-Type': 'application/json'
         },
         
       });
        const jsonData = await response.json();
        if (response && response.status == 401){
       
         localStorage.clear();
          return <Login setToken={setToken} />
        }
        else{
               return jsonData;
              
           };
    
      };

异步函数调用API（apiAction，apiMethod）{ url=baseapirl+apiAction； const response=等待获取（url{ 方法：API法， 标题：{ “授权”：“持票人”+代币， “内容类型”：“应用程序/json” }, }); const jsonData=await response.json（）； if（response&&response.status==401）{ localStorage.clear（）； 返回 } 否则{ 返回jsonData； }; }; 我有一个功能，可以根据单击的选项卡获取带有提交人姓名的票证列表

   function getTickets() {
    setTicketsLoading(true)
    let apiAction='/ticket-filters/' + activeTicketTabId + '/tickets'
    const apiMethod='GET'
    callApi(apiAction,apiMethod)
      .then(jsonData => {
        var i
        if(jsonData.content){
          for(i=0; i < jsonData.content.length; i++)
            { let x = i
               getUsersData(jsonData.content[i].contactId)
                .then(userJsonData => {
                  jsonData.content[x].contactId = {
                     id: userJsonData.content.id,
                     firstName: userJsonData.content.firstName,
                     lastName: userJsonData.content.lastName
                  }
                  setTicketsLoading(false)   
                }
                )
            }
        }
    setTicketData(jsonData)})
    
 }

函数getTickets（）{ setTicketsLoading（真） 让apiAction='/ticketfilters/'+activeTicketTabId+'/tickets' const apiMethod='GET' callApi（apiAction，apiMethod） .然后（jsonData=>{ 变量i if（jsonData.content）{ 对于（i=0；i{ jsonData.content[x].联系人ID={ id:userJsonData.content.id， firstName:userJsonData.content.firstName， lastName:userJsonData.content.lastName } setTicketsLoading（假） } ) } } setTicketData（jsonData）}） } 一切都很好，我点击了我想显示的标签useEffect看到了活动标签的变化，它用正确的数据重新显示页面…只要没有太多的数据。如果名单上有15-20张票，没问题。如果有100张票，所有票都会加载，但用户数据在几个结果后会呕吐。我注意到的另一件事是，即时加载票证id和主题，而联系人/用户名则需要更长的时间

if(!ticketsLoading){
  if(ticketData.content){
    ticketItems = ticketData.content.map(function (ticket) {
   
      return(
        <tr
        key={ticket.id}
        onClick={() => handleActiveTicket(ticket.id)}>
          <td>{ticket.id}</td>
          <td className="text-truncate">{ticket.subject}</td>
          <td className="text-truncate">{ticket.contactId.firstName} {ticket.contactId.lastName}</td>
        </tr>
      )
    }
    )
  }
} 

if（！ticketsLoading）{
如果（ticketData.content）{
ticketItems=ticketData.content.map（函数（票证）{
返回(
HandleactiveKet（ticket.id）}>
{ticket.id}
{ticket.subject}
{ticket.contactId.firstName}{ticket.contactId.lastName}
)
}
)
}
} 

我试图创建一个等待循环完成的状态，但它仍然只呈现少数名称，然后就放弃了。如果我单击另一个票证选项卡来呈现该列表，我可以看到名称出现，因此数据就在那里，只是速度不够快，无法超过页面呈现。想法