-2

Por favor preciso de ajuda para fazer uma paginação dos resultados de informações em uma API externa (pokeapi.co) consigo buscar todos os itens, limitei as respostas em cem unidades e agora quero paginar em dez em dez por páginas, mas apresenta o seguinte erro, quando clico nos links da paginação para mudar de paginas e os itens ainda não aparecem como paginados. Erro abaixo:

this.setState is not a function na linha 21 do código que listo abaixo:


    import React, { Component } from 'react';
    import axios from 'axios';
    import Pagination from 'react-js-pagination';
    import PokemonCard from './PokemonCard';

    require ('bootstrap-less/bootstrap/bootstrap.less');

    export default class PolemonList extends Component {
     constructor(props) {
     super(props);
     this.state = {
      activePage: 1,
      pageNumber: 10
    };
   }

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

  state = {
    url: 'https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100',
    pokemon: null
  };

  async componentDidMount() {
    const res = await axios.get('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=100');
    this.setState({ pokemon: res.data['results'] })
  }

  render() {
    return(
      <React.Fragment>
        {this.state.pokemon ? (
          <div className="row">
            {this.state.pokemon.map(pokemon => (
              <PokemonCard
                key={pokemon.name}
                name={pokemon.name}
                url={pokemon.url}
              />
              ))}
          </div>
        ) : (
              <h2>Loading Pokemon</h2>
        )}
        <hr></hr>
        <div className="row">
          <div className="col-12 text-center">
            <Pagination
              activePage={this.state.activePage}
              itemsCountPerPage={8}
              totalItemsCount={100}
              pageRangeDisplayed={10}
              onChange={this.handlePageChange}
            />
          </div>
        </div>
      </React.Fragment>
    );
  }
}

Por favor alguém pode me ajudar? Agradeço antecipadamente.

2
  • Você deveria trazer 10 em 10 da API ela te dá essa oportunidade. E ai paginar assim. A API já faz isso
    – novic
    3/08/2019 às 14:59
  • Virgilio obrigado por responder. Mas, por favor pode me mostrar como. Sou aprendiz e não sei como fazer isso, ainda. Ficaria muito agradecido.
    – Luizcow
    3/08/2019 às 16:45

1 Resposta 1

0

Vou sugerir um exemplo minimo para que possa adaptar ao seu código de forma muito simples e objetiva, que só traz os dados da paginação quando for solicitado.

const PokemonCard = (props) => {
  return (    
      <div className="col-sm-3 col-md-4">
        <div className="thumbnail">          
          <div className="caption">
            <h3>{props.name}</h3>            
          </div>
        </div>
      </div>    
  );
};

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      activePage: 1,      
      data: {
        count: 0,
        next: '',
        previous: '',
        results:[]
      }
    };
    this.handlePageChange = this.handlePageChange.bind(this);
  }
  handlePageChange(pageNumber) {    
    this.setState({activePage: pageNumber}, () => {
      this.loadItems(pageNumber);
    });
    return true;
  }
  loadItems(page) {
    const url = 'https://pokeapi.co/api/v2/pokemon/?offset=' + page + '&limit=10';
    axios.get(url)
      .then(response => {        
        this.setState({data: response.data});
        console.log(this.state.data);
      })
  }
  async componentDidMount(){
    this.loadItems(this.state.activePage);
  }
  render() {
    return (
      <div className="container">
        <div className="row">
          {this.state.data.results.map((result,index) => (
            <PokemonCard key={index} name={result.name}></PokemonCard>
          ))}          
        </div>
        <div>
          <Pagination
            activePage={this.state.activePage}
            itemsCountPerPage={10}
            totalItemsCount={this.state.data.count}
            pageRangeDisplayed={5}
            onChange={this.handlePageChange}
          />
        </div>
      </div>
    );
  }  
}
ReactDOM.render(<App/>,document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

3
  • Virgilio agradeço a a sua ajuda.Fiz como falou, agora apresenta outro erro dizendo que não reconhece outro arquivo. Estou disponibilizando no github para,se puder e quiser dar uma olhada no sistema. github.com/LuizCowBTF/PokemonTest AGRADEÇO IMENSAMENTE.
    – Luizcow
    4/08/2019 às 1:29
  • O exemplo que te passei @Luizcow é um funcional e testado ... !!!
    – novic
    4/08/2019 às 1:31
  • Eu reproduzi um exemplo minimo! e funcional ... é só analisar! a gente aqui retira duvida de trechos de código e não do projeto como um todo @Luizcow
    – novic
    4/08/2019 às 1:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .