Question

我看过其他解决方案，但似乎无法将它们合并到我自己的代码中。

handleMovieClick = pageTransition => {
        if (this.state.moviePage === 1 && pageTransition === '-') {
            this.setState({ moviePage: 1 });
          } else if (pageTransition === '+') {
            this.setState({ moviePage: this.state.moviePage + 1 })
          } else if (pageTransition === '-') {
            this.setState({ moviePage: this.state.moviePage - 1 })
          }
      }

上面的setState后面是1，例如，我必须单击两次才能到达1。我知道它与单击一次状态渲染有关，然后状态增加，但是我不是确定如何解决。任何帮助，将不胜感激。

this.state = {
            moviePage: 1,
            tvPage: 1
        };

下面是电影触发器

<PaginationLink previous href="#toggle-buttons" onClick={()=>
{this.handleMovieClick('-'); this.handleFetchNewMovie(this.props.apiKey, this.state.moviePage)}} />

这是一个异步调用，可能是导致状态落后1步的原因吗？

handleFetchNewMovie = (apiKey, page = 1) => {
        this.props.postMoviePopular(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=${page}&region=US`);
    }

componentDidMount() {
        this.props.postMDBConfig(`https://api.themoviedb.org/3/configuration?api_key=${this.props.apiKey}`);
        this.handleFetchNewMovie(this.props.apiKey);
        this.handleFetchNewTV(this.props.apiKey);
      }

Answer 1

由于setState是异步的，因此您总是看到1后面的状态。

在此代码中：

<PaginationLink previous href="#toggle-buttons" onClick={()=>
{this.handleMovieClick('-'); this.handleFetchNewMovie(this.props.apiKey, this.state.moviePage)}} />

发生handleMovieClick，但this.state.moviePage尚未下一页。

还要注意的另一件事是，当反应状态更新取决于先前的状态时，您应该将一个函数传递给setState，以接收先前的状态。由于setState的异步特性，您必须这样做。 setState docs

反应状态按钮单击位于后面

1 个答案: