Функциональный счетчик setState

Question

Я пытаюсь создать счетчик для компонента нумерации страниц, который использует 4 разных вкладки, поэтому я должен отслеживать каждую нумерацию вкладок с помощью следующего кода:

loadMoreVisits(activeTab) {
  this.setState(
      state => ({
          page: {
            ...state.page,
            [activeTab]: {
              ...state.page[activeTab],
              pageNumber: this.state.page[activeTab].pageNumber + 1
            }  
          }
      })
  );
  this.props.requestVisits({
      pageNumber: this.state.page[activeTab].pageNumber,
      perPage: this.state.page.perPage,
      status: activeTab
  });
}

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

Исходное состояние:

constructor(props) {
    super(props);
    this.state = {
        page: {
            nuevo: {pageNumber: 0},
            confirmado: {pageNumber: 0},
            finalizado: {pageNumber: 0},
            cancelado: {pageNumber: 0},
            perPage: 5
        },
        activeTab: 'nuevo'
    };
}

Answer 1

Поскольку вы используете функцию обновления состояния, у вас уже есть state в области видимости. Почему бы вам не использовать переменную scoped вместо this.state.

Существует вероятность того, что this.state устарел, поскольку он может быть упакован.

this.setState(
      state => ({
          page: {
            ...state.page,
            [activeTab]: {
              ...state.page[activeTab],
              pageNumber: state.page[activeTab].pageNumber + 1
                          ^^^
            }  
          }
      })
  );