陣營 - 終極版 - 等級計數表

Question

我目前正在對FCC的項目之一，特別是這一個：

https://www.freecodecamp.com/challenges/build-a-camper-leaderboard

我能得到它的工作就好了 - 我可以點擊無論是最近的還是最新的分數，它都會相應地重新渲染頁面。

我唯一缺少的就是適當渲染等級號碼。截至目前，這只是目前的數字1

這裏是我當前的代碼的堆棧：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux' 
import { recentData } from '../actions/index' 
import { allTimeData } from '../actions/index' 

export default class TableBoard extends Component { 
    constructor(props){ 
    super(props); 
    } 
    componentDidMount() { 
    this.props.recentData() //fetch data most recent top 
    } 
    renderData(userData){ 
    const name = userData.username; 
    const recent = userData.recent; 
    const allTime = userData.alltime; 
    let rank = 1; 
    return(
     <tr key={name}> 
     <td>{rank}</td> 
     <td>{name}</td> 
     <td>{recent}</td> 
     <td>{allTime}</td> 
     </tr> 
    ) 
    } 
    getRecentData(){ 
    console.log('recent data') 
    this.props.recentData() 
    } 
    getAllTimeData(){ 
    console.log('all-time data') 
    this.props.allTimeData(); 
    } 
    render(){ 
    return(
     <table className="table table-hover"> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>Camper Name</th> 
      <th 
       onClick={this.getRecentData.bind(this)} 
       >Points in 30 days 
      </th> 
      <th 
       onClick={this.getAllTimeData.bind(this)} 
       >All-time Posts 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
      {this.props.FCCData.map(this.renderData)} 
     </tbody> 
     </table> 
    ) 
    } 
} 
function mapStateToProps(state){ 
    return { 
    FCCData: state.collectData 
    } 
} 
function mapDispatchToProps(dispatch){ 
    return bindActionCreators({ recentData, allTimeData }, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(TableBoard); 

我如何添加額外的信息到的renderData功能，才能正確顯示的等級？我假設我需要一個櫃檯？

Answer 1

證指數進入地圖

renderData(item,index){ 
    const name = item.username; 
    const recent = item.recent; 
    const allTime = item.alltime; 
    return(
     <tr key={name}> 
     <td>{index+1}</td> 
     <td>{name}</td> 
     <td>{recent}</td> 
     <td>{allTime}</td> 
     </tr> 
    ) 
    } 

表身

<tbody> 
    {this.props.FCCData.map(this.renderData} 
</tbody>