使用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'