我在为两个不同的 "basic" 或 "premium" 订阅者获取有限记录并在 ReactJS 中显示分页记录计数时遇到问题

Question

我正在尝试获取“基本”和“高级”订阅者的有限记录，并在分页中显示记录数。

我尝试了很多方法来以下面的格式显示记录。

If, I create "BASIC" subscriber then its "value = 0" and for "PREMIUM" its "value = 1".

1. 对于“BASIC”订阅者，我想显示最新的 30 条记录。喜欢：

   • 如果，我有“total = 8”条记录。然后，它将获取 8 条记录并分页显示（8 条中的 1-8 条）记录。
   • 如果，我有“total = 35”条记录。然后。它将获取最新的 30 条记录并分页显示（30 条中的 1-30 条）记录，因为，我 想为基本用户显示 10 条最新记录。

2. 对于“高级”订阅者，我想显示最新的 50 条记录 pageSize 为 30。赞：

   • 如果，我有“total = 55”条记录。然后，它将以 {30-30} 的形式获取记录并在第一页显示（55 中的 1-30）和 (31 - 55 out 55) 在分页的下一页。
   • 如果，我有“total = 75”条记录。然后。它将获取最新的 100 条记录，并在分页的第一页显示（50 条中的 1-30 条）和下一页的（50 条中的 31-50 条），因为，我想为高级用户显示最新的 50 条记录。

---

Below, Is my code, Please correct me where i am wrong. Thank you for any help.

条件：

1. 如果 userType = 0 那么，User = "BASIC"
2. 如果 userType = 1 那么，User = "Premium"

---

 // const pageSize = parseInt(50);
    
    
    this.state = {
                pageInfo: {
                    offset: 0,
                    limit: (userType === 1)? premium: basic,
                    total: -1
                },
                currentPage: 1,
                totalRecords: null,
                currentRecords: [],
                logRecords: [],
    }
    
    // Here, I am fetching data from API using ajax request
    
    myUserRecords(){
                 var pageInfo = {};
                 pageInfo = this.state.pageInfo;
                 pageInfo = { ...pageInfo, total: -1 }
                 
                 if (this.state.currentRecords.length !== 0 && ((this.state.currentPage * 
                     this.pageLimit) - this.pageLimit) > this.state.currentRecords.length) {
                     
                      this.setState({ currentPage: 1 })
                      pageInfo = { ...pageInfo, offset: 0 }
                  }
    
            $.ajax({
                method: "GET",
                url: API + encodeURIComponent(JSON.stringify(filter)),
                dataType: 'json',
            })
    
           .done(function (result) {
    
                this.setState({ logRecords : result.records, pageInfo : result.pageInfo });
    
                let currentPage = this.state.currentPage;
                
                if (result.records.length !== 0 && this.state.currentPage === 0) {
                    currentPage = 1;
                }
    
                 if(currentPage>1){
            self.setState({
                currentPage: currentPage, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }else{
            self.setState({
                currentPage: currentPage, totalRecords: resultObj.pageInfo.total, records: resultObj.records,
                pageInfo: resultObj.pageInfo
            });
        }   
           })
          .fail(function (error) {
                if(error == "error"){ return }
          });
    }
    
    
    getStartEndValue = () => {
            let start =((this.state.currentPage-1) * this.pageLimit) + 1;
            let end = this.state.currentPage * this.pageLimit;
            if(end > this.state.userRecords)
            {
                end = this.state.userRecords
            }
            return { start , end }
    }
    
    onPageChanged = (data) => {
            const { records } = this.state;
            const { currentPage, totalPages, pageLimit } = data;
            let new_offset = (currentPage * pageLimit) - pageLimit
            let pageInfo = { ...this.state.pageInfo, offset: new_offset }
            if (currentPage === 0 && this.state.currentRecords.length > 0) {
                currentPage = 1
            }
            const offset = (currentPage - 1) * pageLimit;
            const currentRecords = records.slice(offset, offset + pageLimit);
            this.setState({ currentPage, currentRecords, totalPages, pageInfo }, () => {
                this.myUserRecords();
            });
     };
    
     render() { 
            let { start , end } = this.getStartEndValue();
          
            <div className="paginationNew">
              <div className="recordCount">
                   
                     {this.state.totalRecords > 0 ?
                             <h2 className={"text-dark"}>
                                    
                              {/* <strong className="text-secondary"> {start} - {end} 
                              out of {this.state.totalRecords}</strong>{" "}  */}
    
                              <strong className="text-secondary"> {start} - {end} out of 
                              {this.state.pageInfo.limit}</strong>{" "} 
    
                              </h2>  : "No records found"  }
              </div>
              <div className="paginationComp">
                  <NewPagination
                      totalRecords={this.state.totalRecords}
                      pageLimit={(userType === 1)? premium: basic}
                      pageNeighbours={1}
                      onPageChanged={this.onPageChanged}
                      current_page={this.state.currentPage}
                   />
              </div>
            </div>
    }

Answer 1

我在每个页面上添加了 30 条记录的 pageSize 以获取额外费用。

const pageSize = parseInt(30);


constructor() {
super();
this.state = {
            pageSize: (userType === 1)? pageSize: basic,
            pageInfo: {
                offset: 0,
                limit: (userType === 1)? pageSize: basic,
                total: 0
            },
            totalRecords: null,
            totalCount: (userType === 1)? premium: basic,

}
            this.pageLimit = this.state.pageSize;
}

在 loadRecords() 中，我在 API 调用 .done 函数后给出条件。

• 如果 totalRecords > then (Basic/Premium) 限制值它将
  仅给出已分配给 (BASIC/Premium) 的记录的 logCount 值，否则给出 totalRecords.

  loadRecords(){

       .done{
               const totalRecords = (result.pageInfo.total > logCount)? logCount: result.pageInfo.total;
  
               this.setState({ currentPage : currentPage, totalRecords : totalRecords, records: result.records, pageInfo : result.pageInfo});
            }
  

  }