使用 API 进行分页

Question

Bonjour tout le monde ！我有一个分页问题，​​也许有人会有解决方案。 我使用 Axios 进行了 API 调用，它返回了电影列表，并且每页有 20 个结果的分页。 问题是有延迟，当我在第一页时，我必须在“下一步”上单击两次才能访问第二页。 如果我在第 3 页并单击“上一页”，我会转到第 4 页，我必须再次单击“上一页”才能返回到第 3 页。 所以有一个时间限制，迫使我第一次点击“下一个”时点击两次，然后再次点击“上一个”。 我不明白错误来自哪里......

这是我的代码：

我的构造函数：

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)
  }

我的函数调用 Axios 并更新我的状态“电影”：

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
      })
    })
  }

允许我转到下一页或上一页的功能：

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()
  }

我的组件DidMount：

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

还有我用于下一页或上一页的两个按钮：

<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>

如果有人能启发我，那就太好了。 谢谢！

Answer 1

请在状态提交成功后，即在状态更改回调中尝试调用get操作

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)
    }

  }