CODEWITHSUNDEEP
javascriptreactjs
user12023869
user12023869

Reputation:

Pagination with API

Bonjour tout le monde ! I have a pagination problem, maybe someone will have the solution. I made an API call with Axios that returns a list of movies and I have a pagination of 20 results per page. The problem is that there is a delay and when I am on the first page, I have to click twice on "next" to access the second page. If I am on the 3rd page and click on "previous", I go to the 4th page and I have to click on "previous" again to go back to the 3rd page. So there is a time limit that forces me to click twice the first time I want to do "next" and also twice to come back with "previous". I don't understand where the error comes from...

There is my code:

My constructor:

constructor(props){
    super(props);
    this.state = {
      films: [],
      page: 1,
      loading: false,
      genres: []
    };
    this.getFilms = this.getFilms.bind(this)
    this.btnClickPrev = this.btnClickPrev.bind(this)
    this.btnClickNext = this.btnClickNext.bind(this)
  }

My function that makes an Axios call and updates my state "films":

getFilms(){
    const { page } = this.state
    this.setState({
      films: [],
      loading: true,
    })
    Axios.get(`${baseUrlDiscover}&page=${page}`)
    .then((response) => {
      this.setState({
        films: response.data.results,
        loading: false
      })
    })
    .catch(error => {
      console.log(error)
      this.setState({
        films: [],
        loading: false
      })
    })
  }

The functions that allow me to go to the next or previous page:

btnClickNext(e){
    const page = e.target.value
    console.log(page)
    if(this.state.films && this.state.page !== 500){
      this.setState(prevState => ({ page: prevState.page += 1 }))
    }
    this.getFilms()
  }
  btnClickPrev(e){
    const page = e.target.value
    console.log(page)
    if(this.state.films && this.state.page !== 1){
      this.setState(prevState => ({ page: prevState.page -= 1 }))
    }
    this.getFilms()
  }

My componentDidMount: 

componentDidMount(){
    this.getFilms()
    this.getGenres()
  }

And my two buttons for next or previous page:

<Button
   href=""
   target="_blank"
   className={classes.navLink}
   onClick={this.btnClickPrev}
 >
   <NavigateBeforeIcon /> Prev
 </Button>
 <Button
   href=""
   target="_blank"
   className={classes.navLink}
   onClick={this.btnClickNext}
 >
   Next <NavigateNextIcon />
 </Button>

If someone can enlighten me, that would be great. Thanks !

Upvotes: 1

Views: 107

Answers (1)

Mohit Mutha
Mohit Mutha

Reputation: 3001

Please try calling the get action after the state is committed successfully i.e. in the state change callback

btnClickNext(e){
    const page = e.target.value
    console.log(page)
    if(this.state.films && this.state.page !== 500){
      this.setState(prevState => ({ page: prevState.page += 1 }),this.getFilms)
    }

  }
  btnClickPrev(e){
    const page = e.target.value
    console.log(page)
    if(this.state.films && this.state.page !== 1){
      this.setState(prevState => ({ page: prevState.page -= 1 }), this.getFilms)
    }

  }

Upvotes: 1

Related Questions