將行添加到反應jsx中的表中，而不復制行標題

Question

我想從Firebase中提取數據，然後將其作爲表格呈現在我的反應組件中。目前爲止所有工作都很順利，並能正確呈現數據。但是，我不想每次都呈現表格標題。這是迄今爲止代碼：

<div className="table"> 
    <h1> Table </h1> 
    {players.sort(function(a, b) { 
      return (a.rank) - (b.rank); 
     }).map(function(player, index) { 
     index +=1; 
     return <table> 
       <tr> 
       <th>Rank</th> 
       <th>Name</th> 
       <th>Wins</th> 
       <th>Losses</th> 
       </tr> 
       <tr> 
       <th>{player.rank}</th> 
       <th>{player.name}</th> 
       <th>{player.wins}</th> 
       <th>{player.losses}</th> 
       </tr> 
      </table> 
    }, this)} 
    </div> 

我明白它爲什麼這樣做，因爲我每次映射在我的數組時，返回我的表格標題。我不能完全找出一種方法來呈現不同的表格標題。我想將它從這部分中移出，但是如果這有意義的話，我不確定如何將它與表格鏈接起來。 我基本上只想要rank,name,wins,losses，要呈現一次。

Answer 1

您可以從地圖中取出不想用數據迭代的部分。

<div className="table"> 
    <h1> Table </h1> 
    <table> 
     <tr> 
     <th>Rank</th> 
     <th>Name</th> 
     <th>Wins</th> 
     <th>Losses</th> 
     </tr> 
    {players.sort(function(a, b) { 
      return (a.rank) - (b.rank); 
     }).map(function(player, index) { 
     index +=1; 
     return <tr> 
       <th>{player.rank}</th> 
       <th>{player.name}</th> 
       <th>{player.wins}</th> 
       <th>{player.losses}</th> 
      </tr> 
    }, this)} 
    </table> 
    </div>