代码之家  ›  专栏  ›  技术社区  ›  Nicolas Albarracin

功能设置状态计数器

  •  0
  • Nicolas Albarracin  · 技术社区  · 7 年前

    我试图为一个分页组件做一个计数器,该组件使用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
      });
    }
    

    初始状态:

    constructor(props) {
        super(props);
        this.state = {
            page: {
                nuevo: {pageNumber: 0},
                confirmado: {pageNumber: 0},
                finalizado: {pageNumber: 0},
                cancelado: {pageNumber: 0},
                perPage: 5
            },
            activeTab: 'nuevo'
        };
    }
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Sushanth --    7 年前

    在使用state updater函数时,已经有了 state 在范围内。为什么不使用作用域变量而不是 this.state .

    有可能 本州 已经过时了,因为它可能是成批的。

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