使用 api 在 react 中创建分页

Question

我第一次从分页 react-js-pagination 创建分页，我已经能够构建组件并取回数据，显示并运行它需要做的事情，但我收到了最大来自我的 api 的 500 条数据并在一页上显示 500 条数据并不理想，因此分页。我试图像这样从 api 中切出数据，

  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.log(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, indexOfLastTrail);

      console.log(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick={() => chooseTrail(trail.id)} className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'

并映射要渲染的切片数据。我返回了映射的数据，没有数据被渲染，我的控制台仍然返回我有来自切片数据的 500 条数据。不知道从这里去哪里寻找关于使用 api 的分页信息。

这是我的完整组件

class Trails extends Component {
  constructor(){
    super();
    this.state ={
        activePage:1,
        itemsPerPage: 20
    }
}

componentDidMount() {
axios.get(`https://www.hikingproject.com/data/get-trails? 
lat=${this.props.location.state.latitude}&lon=
${this.props.location.state.longitude}&maxDistance=150
&maxResults=500&key={API KEY}`).then((res)=> {
    console.log(res.data)
    this.props.getTrails(res.data.trails)
    }).catch(error => {
        console.log(error, 'There was an error finding the trails 
requested.')
    })
  }


handlePageChange = (pageNumber) => {
    console.log(`active page is ${pageNumber}`);
    this.setState({activePage: pageNumber});
  }




  render() { 


      let { trailsList, chooseTrail } = this.props;
      console.log(trailsList)

      //FOR PAGINATION
      var indexOfLastTrail = this.state.activePage * 
this.state.itemPerPage;
      var indexOfFirstTrail = indexOfLastTrail - 
this.state.itemPerPage;
      var renderedTrails = trailsList.slice(indexOfFirstTrail, 
indexOfLastTrail);

      console.log(renderedTrails)
    let mappedTrails = renderedTrails ?  renderedTrails.map((trail, 
index) => {
        return 
        <div className='trailsContainer'> 
            <Link onClick={() => chooseTrail(trail.id)} 
className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'


    return ( 
    <div className='mainTrails'>
        <div className='container'>
         {/* <div><GoogleMap /></div> */}
            <div>{mappedTrails}</div>
            <p></p>
        <div>


       <div>
           <Pagination
                activePage={this.state.activePage}
                itemsCountPerPage={20}
                totalItemsCount={this.props.trailsList.length}
                pageRangeDisplayed={5}
                onChange={this.handlePageChange}
            />
    </div> 
            </div>
        </div>
     </div>
     );
  }
}

const mapStateToProps = state => {
  return {
    trailsList: state.trailsList,
    chooseTrail: state.chooseTrail
  }
}

const mapDispatchToProps = {
  getTrails,
  chooseTrail
}

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

Answer 1

我检查了控制台日志状态，发现数字返回正确，但一旦我尝试将它们相乘，它们返回的是 NaN。原因是它们被作为字符串相乘，在相乘之前对它们使用 parseInt 就可以了。

      let { trailsList, chooseTrail } = this.props;
       console.log(trailsList)

      //FOR PAGINATION
      let activePageIndex = parseInt(this.state.activePage, 10);
      let itemsPerPageIndex = parseInt(this.state.itemsPerPage, 10);


        let indexOfLastTrail = activePageIndex * itemsPerPageIndex;
        let indexOfFirstTrail = indexOfLastTrail - itemsPerPageIndex;

      let renderedTrails = trailsList.slice(indexOfFirstTrail, 
indexOfLastTrail);

      let mappedTrails = renderedTrails ?  renderedTrails.map((trail, index) => 
{
          return <div className='trailsContainer'> 
            <Link onClick={() => {chooseTrail(trail.id)}} 
className='trailButton' to={{ pathname:`/trail/${trail.id}`}} 
         key={index}><div>



        <img id='trailImg' src={trail.imgSmall} alt={trail.name}></img>
        <h4>{trail.name}</h4>
        <h6>Length: {trail.length + ' miles'}</h6>
        <h6>{trail.location}</h6>

        </div></Link>
        </div>
    }) : 'loading'