Question

我必须在我的应用程序中实现分页逻辑。我正在显示来自freelancer api的作业列表，并且正在使用 https://www.npmjs.com/package/material-ui-flat-pagination来实现分页。这是我遵循组件语法的代码。我可以显示页码，但是onClick功能不起作用。当我单击特定的页码时，如何仅显示10个作业。任何帮助表示赞赏。

 this.state = {
  listOfJobs: [],
  freelancerApiInProgress: true,
  isFreelancerApiSuccess: true,
  savedGigs: [],
  isSavedJobs: false,
  offset: 0

  };
  this.handleClick = this.handleClick.bind(this)
 }
   handleClick(offset) {
    this.setState({
      offset
   });
 }
componentDidMount() {
let interval = window.setInterval(() => {
  clearInterval()
  if (uid !== null) {
    clearInterval(interval);
    const promise1 = this.fetchSavedGigs();
    const promise2 = this.fetchFreelancerJobs();
    let currentState = this.state;

    Promise.all([promise1, promise2]).then(values => {
      console.log(values);
      const savedGigs = values[0];
      const freelancerJobs = values[1].data.result.projects;
      freelancerJobs.forEach(project => {
        currentState.listOfJobs.push({
          bid_avg: project.bid_stats.bid_avg,
          bid_count: project.bid_stats.bid_count,
          budget_minimum: project.budget.minimum,
          budget_maximum: project.budget.maximum,
          frontend_project_status: project.frontend_project_status,
          time_submitted: project.time_submitted,
          title: project.title,
          type: project.type,
          preview_description: project.preview_description,
          id: project.id,
          isLiked: this.checkIfGigIsSaved(savedGigs, project.id)
        });
      });

      this.setState({
        listOfJobs: currentState.listOfJobs,
        isFreelancerApiSuccess: true,
        freelancerApiInProgress: false,
        savedGigs: savedGigs
      });
    });
  }
}, 250);

}

///这是我实现分页逻辑的地方作业卡是我在卡中显示布局的子组件

               <MuiThemeProvider theme={theme}>
                      <CssBaseline />
                        <Pagination
                        limit={10}
                        offset={this.state.offset}
                        total={this.state.listOfJobs.length}
                        onClick={(e, offset) => 
                         this.handleClick(offset)}
                        />
                    </MuiThemeProvider>

                  {this.state.listOfJobs.map((jobItem, index) => (
                      <div key={index} className="list-of-jobs">

                        <JobCard
                          job={jobItem}
                          handleGigSave={this.handleGigSave}
                          handleGigUnSave={this.handleGigUnSave}
                          index={index}
                          isLiked={jobItem.isLiked}
                        />

Answer 1

如果此问题未能解决。在状态中声明pageNo变量并为其分配1（即pageNo：1），使用handleClick方法中的 page 参数并将其设置为pageNo变量。

handleClick = (offset, page) => {
    this.setState({ pageNo: page, offset: offset });
}

我正在实施材料-Ui-flat反应分页

1 个答案: