CODEWITHSUNDEEP
javascriptreactjsjsx
Volodumr
Volodumr

Reputation: 173

How update information on page without it reload

I want to get different lists of films by using API. I have a list of films, list of items in a header like "Popular Upcoming Top rated", using react-router-dom and when click on some of these items there load list of films.

Problem in next: When I come on the page of films using items from header in component of FilmList I replace some part of link to getting right link for getting films like:

    componentDidMount(){
        let filmApi =`https://api.themoviedb.org/3/movie/${this.props.filmType}?api_key=6f7c9fe2b5229b4b0b6dbe66fed3ef18&language=en-US&page=1`;
        // this.props.filmType i get when go on page of film (Popular->popular, Top rated-> top_rated

        this.props.getListFilms(filmApi); // here I send this ready link to fetch it in redux
    }

It works but just the first time, because of using the react router dom when I click on next item like from popular to top-rated page didn't reload and link stay for the previous list of film. How can I do that when I change the list of films it correctly works? Maybe I need to use await async?

Upvotes: 0

Views: 93

Answers (2)

vahid ghadiri
vahid ghadiri

Reputation: 345

Whenever you call the api, push the response in your state, then check this.state is equal to nextState or not. If not, write a function and do what you want.

shouldComponentUpdate(nextProps, nextState, nextContext) {
  const {data: preData}= this.state
  const {data: nextData} = nextState
  if(preData !== nextData) console.log("data has changed")
    return true
}

Upvotes: 1

TBK
TBK

Reputation: 71

If I understood correctly, your problem is "you can not update the same page with different values". ComponentDidMount function does your fecthing process at the beginning of the page loading time but when you try to change it doesn't render.So you need to use ComponentDidUpdate function with adding if condition there. Compare previous data and currently fetched data and use your getListFilms function again. I think it will work.

Upvotes: 0

Related Questions