reactjs - Как отобразить название компании только один раз и показать все измененные объекты в других строках

Question

Я нашел ошибку в моем существующем приложении. Я пытаюсь отобразить таблицу своих объектов, где я хочу показать название компании, когда-либо наверху, если есть какие-либо изменения.

Этот код работает для меня, если я удалю (i === 0), но проблема в том, что он повторяет название компании в верхней части каждого нового объекта внутри компании. Но теперь я использую i === 0, и он отлично работает, если я только первый раз меняю первый объект в деталях компании, а затем меняю любое другое средство. Я никогда не показываю мне название компании, если я начну менять какое-либо средство, кроме первого, поскольку значение i изменилось с 0 на другое. Любая идея, как я могу ее исправить и выйти из моей проблемы.

{companies.map((company,i) => 
    company.facilityGroups.map((group,i) => { 
     let facilityNo = 0 
     return grp.facilities.map((fac,j) => { 
     const existinglimitInFacilityCurrency = fac.existingFacility.limitInFacilityCurrency 
     const proposedlimitInFacilityCurrency = fac.proposedFacility.limitInFacilityCurrency 

     const facilityJustAdded = !existinglimitInFacilityCurrency && proposedlimitInFacilityCurrency 
     const facilityHasProposedChanges = ((existinglimitInFacilityCurrency && proposedlimitInFacilityCurrency) && 
      (existinglimitInFacilityCurrency.amount !== proposedlimitInFacilityCurrency.amount)) 
      || !!facilityJustAdded 
     if(facilityHasProposedChanges) facilityNo++ 

     return (
      <tbody key={j}> 
      {i===0 && facilityNo===1 && facilityHasProposedChanges ? (()=>{ 
       return(
       <tr className="table__tr--subheading"> 
        <td colSpan="7">{company.companyName}</td> 
       </tr>) 
      })() : null} 
      {facilityHasProposedChanges ? (() => { 
       return(
       <tr> 
        <td>{fac.description}</td> 
        <td> 
        .... 
       </tr>) 
      })() : null} 
      </tbody> 
     ) 
     }) 
    }) 
)} 

Я также прилагается изображение, как выглядит выход .. How it is working now..

How i want it to work..

Answer 1

Я исправил проблему. Я просто переместил переменную (пусть объектNo = 0) за пределы петель, и она исправила мою проблему. теперь мой код выглядит так.

{companies.map((company,i) => { 
    let facilityNo = 0 
    return (
    company.facilityGroups.map((group,i) => { 
    return grp.facilities.map((fac,j) => { 
     const existinglimitInFacilityCurrency = fac.existingFacility.limitInFacilityCurrency 
     const proposedlimitInFacilityCurrency = fac.proposedFacility.limitInFacilityCurrency 

     const facilityJustAdded = !existinglimitInFacilityCurrency && proposedlimitInFacilityCurrency 
     const facilityHasProposedChanges = ((existinglimitInFacilityCurrency && proposedlimitInFacilityCurrency) && 
     (existinglimitInFacilityCurrency.amount !== proposedlimitInFacilityCurrency.amount)) 
     || !!facilityJustAdded 
     if(facilityHasProposedChanges) facilityNo++ 

     return (
     <tbody key={j}> 
     {facilityNo===1 && facilityHasProposedChanges ? (()=>{ 
      return(
      <tr className="table__tr--subheading"> 
       <td colSpan="7">{company.companyName}</td> 
      </tr>) 
     })() : null} 
     {facilityHasProposedChanges ? (() => { 
      return(
      <tr> 
       <td>{fac.description}</td> 
       <td> 
       .... 
      </tr>) 
     })() : null} 
     </tbody> 
    ) 
    }) 
    }) 
)} 
)}