Реакция нажатия кнопки состояния находится позади

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

Вы всегда видите состояние позади на 1, потому что setState является асинхронным.

В этом коде:

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

Происходит handleMovieClick, но this.state.moviePage - это не следующая страница.

Еще одна вещь, на которую следует обратить внимание, это то, что при реагированииОбновление состояния зависит от предыдущего состояния. Вы должны передать функцию в setState, которая получает предыдущее состояние. Вы должны сделать это из-за асинхронной природы setState. setState docs