Создание пагинации в реакции с использованием API - PullRequest
Новая
       17

Создание пагинации в реакции с использованием API

0 голосов
/ 27 сентября 2018

Я работаю над созданием нумерации страниц из pagination реагировать-js-pagination в первый раз, и мне удалось построить компонент и вернуть данные, отображенные и функциональные для того, что нужно сделать, но я получаю максимумиз 500 частей данных из моего API и отображения 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);

1 Ответ

0 голосов
/ 27 сентября 2018

Я прошел через состояние регистрации консоли и обнаружил, что числа возвращаются правильно, но как только я попытался их умножить, они возвращали 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'
...