反应状态按钮点击落后答案

【问题标题】：React State Button Click is Behind反应状态按钮点击落后
【发布时间】：2020-02-16 20:38:00
【问题描述】：

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

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

【问题讨论】：

根据您提供的代码几乎不可能提供帮助。 Please create a minimal reproducible example（通过 CodeSandbox 或类似的东西），除了提供更多代码..
是的，我们需要查看触发pageTransition的按钮的代码
在 CodeSandbox 上重新创建它时遇到了一些问题，如果有帮助，我会发布更多代码。

标签： reactjs redux react-redux state

【解决方案1】：

因为setState 是异步的，所以您总是会看到落后 1 的状态。

在这段代码中：

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

handleMovieClick 发生了，但 this.state.moviePage 还不是下一页。

另外需要注意的是，当 react 状态更新依赖于先前的状态时，您应该将一个函数传递给接收先前状态的setState。由于setState 的异步特性，您必须这样做。 setState docs

【讨论】：

它对我不起作用，我认为这是因为根据 setState 文档， setState 是异步的，因此如果你把 `` nextPage = state.moviePage + 1 ``` 放在里面setState，它的功能仍然相同。无论如何谢谢@b-rob