React setstate is not working when changing page

I don’t understand what am doing wrong here, couldn’t find any solutions.
I hope you can help me.

I guess setState in onChange function is not working or maybe another problem here.
I’ve tried everything to understand the problem but i couldnt’.

I am using ant design pagination to change the pages. thank you.

      componentDidMount() {
        this.setState({
          loading: true,
        });
        const endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`;
        this.getData(endpoint);
      }
    
      getData = (endpoint) => {
        axios.get(endpoint).then((res) => {
          this.setState({
            movies: res.data.results,
            mainImg: res.data.results[0].poster_path,
            loading: false,
            currentPage: res.data.page,
            totalPages: res.data.total_pages,
          });
          console.log(res);
          
        });
      };
    
      onChange = (page) => {
        let endpoint = "";        
        this.setState({ loading: true, currentPage: page });    
        endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`;    
        this.getData(endpoint);
      };
    
      render() {
        const { totalPages, currentPage, movies } = this.state;
        return (
          <div className="main-content">
            <h1>home component</h1>
            <div>
              {movies.map((movie) => {
                return (
                  <ul key={movie.id}>
                    <li>{movie.title}</li>
                  </ul>
                );
              })}
            </div>
            <div>
              <Pagination
                defaultCurrent={1}
                total={totalPages}
                current={currentPage}
                showSizeChanger={false}
                onChange={this.onChange}
              />
            </div>
          </div>
        );
      }
    }

Just taking a look here, I see a problem. Remember that setState is asynchronous. That means that when you call it, the program will move on and the state will get set some time in the future, but you don’t know when. True, it will be very soon, but not “now”. But in the line after your setState you are referencing the state that you were trying to set. You have no guarantee that it will be set in time.

So, I have two solutions.

  1. I don’t think you need to reference state here - page is passed into the function. Why not use that to build your string?
  2. In cases where you do need something definitely to run after setState, setState lets you pass in a second parameter, a callback function. This will not run until after the state is updated.
        this.setState(
          { loading: true, currentPage: page },
          () => {
            endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`;    
            this.getData(endpoint);
          },
        );    

Personally, I think the first option is better.

1 Like

Thank you very much Kevin i did it with 2. solution