Question

我正在使用react-bootstrap对结果进行分页。它正在渲染div #content，但它不再显示了。它只显示了我在CSS文件中配置的宽度，高度和背景颜色的空div。我想显示每页显示一个房子的分页。来自JSON的数据的结果已成功捕获。我该如何解决分页问题？谢谢！

import React, { Component } from 'react'
import axios from 'axios'
import { Pagination } from 'react-bootstrap'

const URL_HOUSES = 'http://localhost:3001/houses';

class Casas extends Component {
  constructor(props) {
    super(props)
    this.state = {
    houses: []      
  }
    this.handlePageChange = this.handlePageChange.bind(this)    
 }

getNumPages(currentPage) {
  { this.handlePageChange } 
    this.setState({
    per_page: this.props.results ,
    currentPage: currentPage + 1 ,
    previousPage: currentPage - 1
   });
 }

  handlePageChange(page, evt) {
    const currentPage = this.state.currentPage || 1;
    const numPages = this.getNumPages();
    const pageLinks = [];
    if (currentPage > 1) {
    if (currentPage > 2) {
      pageLinks.push(1);
      pageLinks.push(' ');
    }
    pageLinks.push(currentPage - 1);
    pageLinks.push(' ');
  }
  for (let i = 1; i <= numPages; i++) {
    const page = i;
    pageLinks.push(page);
  }
  if (currentPage < numPages) {
    pageLinks.push(' ');
    pageLinks.push(currentPage + 1);
    if (currentPage < numPages - 1) {
      pageLinks.push(' ');
      pageLinks.push(numPages);
    }
  }
  this.setState({ currentPage: currentPage + 1  } );
  this.setState({ previousPage: currentPage - 1  } );
}


componentDidMount() {
  axios.get(URL_HOUSES)
  .then(res => {
    this.setState({ houses: res.data })
  })
}

render() {
  const per_page = "1";    
  const paginationData = this.state.houses

  let numPages = Math.ceil(paginationData.length / per_page);

  if (paginationData.length % per_page > 0) {
    numPages++;
  }
  return (
    <div>
      {this.state.houses.map(item =>
        <div>
          <h2>{item.name}</h2>
          <p>{item.description}</p>
          <ul>
            {
            item.photos.map(photo => <li>{photo}</li>)
            }
          </ul>
        </div>
      )}
      <Pagination id="content" className="users-pagination pull-right" 
      bsSize="medium" 
      first last  next  prev  boundaryLinks items={numPages} 
      activePage={ this.state.currentPage } onSelect={ this.handlePageChange 
     } />

     </div>
    )
   }
 }

export default Houses;

Answer 1

// you can use simple join query to fetch your desired record as you want
// and also you can get by Hibernate Criteria instead of using the SQL Query like 
@ManyToOne(fetch=FetchType.LAZY)
@JoinColumn(name="child_table_column",referencedColumnName="id")
private ParentTable updatedBy;
// use above for POJO Configuration and then use simple criteria to get the DATa

您能否关注此链接https://www.npmjs.com/package/react-js-pagination

React-Bootstrap - 分页没有显示

1 个答案: