Правильное место для обновления состояния — React JS

У вас такое же поведение при нажатии кнопки «предыдущий». Может быть проще получить отключенное состояние, чем пытаться вычислить его и сохранить в состоянии.

Функция рендеринга Slides.js

render() {
  const { slides } = this.props;
  return (
    <div>
      <div id="navigation">
        <button
          data-testid="button-restart"
          onClick={this.resandler}
          data-testid="button-restart">
          Restart
        </button>
        <button
          data-testid="button-prev"
          onClick={this.prevHandler}
          data-testid="button-prev"
          // if current slide is 0, there is no previous
          disabled={this.state.currentSlide === 0}>
          Prev
        </button>
        <button
          data-testid="button-next"
          onClick={this.nextHandler}
          data-testid="button-next"
          // if current slide is slides.length - 1, there is no next
          disabled={this.state.currentSlide === this.props.slides.length - 1}>
          Next
        </button>
      </div>
      {slides.map((slide, i) => {
        return i === this.state.currentSlide ? (
          <div id="slide" key={slide + i}>
            <h1 data-testid="title">{slide.title}</h1>
            <p data-testid="text">{slide.text}</p>
          </div>
        ) : null;
      })}
    </div>
  );
}

Внутри вашего nextHandler() измените setState на это:

this.setState({
      currentSlide: this.state.currentSlide + 1,
      nextDisabled: this.state.currentSlide + 1 === this.props.slides.length -  1,
      prevDisabled: false,
});

Учитывая простоту вашего приложения, вам не нужен prevState — вам также не нужно определять каждое поле состояния в возврате (реакция неявно заполнит их как их последнее значение):

// This can be just prevState => since you aren't using props
this.setState((prevState, props) => {
  if (prevState.currentSlide < this.props.slides.length - 1) {
    return {
      currentSlide: prevState.currentSlide + 1,
      prevDisabled: false, 
    };
  } else if (prevState.currentSlide === this.props.slides.length - 1) { // Issue is here
    return {
      nextDisabled: true,
      prevDisabled: false, // Don't need to keep defining this
    };
  }
});

Причина, по которой это не сработало, заключается в том, что вы использовали следующее, чтобы проверить, должна ли кнопка быть отключена:

prevState.currentSlide === this.props.slides.length - 1

prevState будет на 1 отставать от того, что вы намеревались. Для этого вам нужно использовать текущее состояние. Таким образом, другим исправлением было бы изменить его на:

prevState.currentSlide + 1 === this.props.slides.length - 1

Вы можете применить аналогичное исправление к файлу prevHandler().

Проблема в вашем коде заключается в том, что вы не обновляете currentSlide до того, как проверите, следует ли отключить предыдущую или следующую кнопку.

Когда какая-либо кнопка нажата, сначала обновите currentSlide, а затем проверьте, какая кнопка должна быть включена или отключена.

nextHandler функция должна выглядеть так

nextHandler() {
    this.setState(
        prevState => ({ currentSlide: ++prevState.currentSlide}),
        () => {
          if (this.state.currentSlide < this.props.slides.length - 1) {
            this.setState({ prevDisabled: false });
          } else {
            this.setState({ nextDisabled: true });
          }
        }
    );
} 

и prevHandler должно быть вот так

prevHandler() {
    this.setState(
      prevState => ({ currentSlide: --prevState.currentSlide}),
      () => {
        if (this.state.currentSlide === 0) {
          this.setState({ nextDisabled: false, prevDisabled: true });
        } 
      }
    );
}