0

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>
        );
      }
    }
MwamiTovi
  • 2,425
  • 17
  • 25
Yosujiro
  • 1
  • 3
  • What exacrly isn't working or what error do you get? – k-wasilewski Aug 08 '20 at 16:24
  • there is no error, when i click a number on pagination to change page. page and loading is not changing. setstate in onChange is not working, doesnt change loading and currentpage – Yosujiro Aug 08 '20 at 16:26
  • Try logging `page` as the first statement in your `onChange` function to see if it actually works. Does your `getData()` get any response? You should investigate where precisely the issue is. – k-wasilewski Aug 08 '20 at 16:36
  • i've tried that,yes page is working fine page number is changing when i press. yes my getdata get response but only first page no : 1 – Yosujiro Aug 08 '20 at 16:45
  • Allright, so it's an issue with your backend, not React. Just investigate the `getData()` and your browser console to be sure. – k-wasilewski Aug 08 '20 at 16:50
  • no :) currentPage is always 1. this.setState({ loading: true, currentPage: page }); this is not working – Yosujiro Aug 08 '20 at 16:54
  • It's not possible that `setState` is not working, it must be an issue with this `Pagination` component. Maybe you're using it wrong, read the docs or something... – k-wasilewski Aug 08 '20 at 17:08

1 Answers1

0

setState is asynchronous

React setState not updating state

In your onChange function, use page instead of this.state.currentPage when you update your endpoint variable (since state has not yet been updated)

Then, end your onChange function with this.render(); to re-render your JSX once the state variable has been updated

Kevin Morey
  • 46
  • 3
  • 1
    thanks a lot i solved this way -> onChange = (page) => { let endpoint = ""; this.setState({ loading: true, currentPage: page }, () => { //console.log(this.state.currentPage); endpoint = `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}&language=en-US&page=${this.state.currentPage}`; this.getData(endpoint); }); }; – Yosujiro Aug 08 '20 at 19:57