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>

React-Redux - 排名计数表

1 个答案: