功能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。为什么不使用范围变量而不是this.state。

this.state可能由于已批次而过时。

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