Bootstrap在reactjs中的分页-数据来自MongoDB [英] Bootstrap's Pagination in reactjs - Data coming from MongoDB

问题描述

正在尝试在reactjs应用程序中进行分页.请在下面找到代码. 最终无法呈现列表.它的空白列表.有人可以帮我找出这里的错误吗? 请找到完整的代码.

Am trying to make a pagination in reactjs application. Please find the code below. Finally am not able to render the list. Its giving blank list. could someone help me out to figure out the error here.? Please find the complete code.

    return (
  <table className="table table-hover" >
    <thead >
      <tr>
        <th>Order Number</th>
        <th>Customer Name</th>
        <th>Created By</th>
      </tr>
    </thead>
    <SearchResultsList items={this.props.results} open={this.props.open} />
  </table>
);
    }
    }
class SearchResultsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const per_page = 10;
    const pages = Math.ceil(this.props.items.length / per_page);
    const current_page = 1;
    const start_offset = (current_page - 1) * per_page;
    let start_count = 0;
    return (
      <tbody>
        {
          this.props.items.sort(
            (a, b) => moment(b.order_date) - moment(a.order_date) || b.order_number -
              a.order_number)
            .map((item, index) => {
              if (index >= start_offset && start_count < per_page) {
                start_count++;
                <SearchResultsItem key={item.id} item={item} open={this.props.open} />
              }
            })
        }
      </tbody>
    );
    <Pagination
      ClassName="items-pagination pull-right"
      bsSize="medium"
      maxButton={10}
      first last next prev boundaryLinks
      item={pages}
      activePage={current_page} />
  }
    class SearchResultsItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.state = {};
  }
  handleInputChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    this.setState({ [name]: value });
  }
  render() {
    return (
      <tr style={{ fontsize: '10', cursor: 'pointer' }}
    <td>{this.props.item.order_number}</td>
      <td>{this.props.item.customer_name}</td>
      <td>{this.props.item.buyer_name}</td>
    </tr >
    );
  }
}

请在下面找到演示数据.来自mongodb的数据作为JSON对象.

Please find the demo data below. Data coming from mongodb as JSON objects.

{ 
"_id" : "658ecv57b-3853-46f4-af6c-cb1ca111137f", 
"order_number" : "1000123", 
"customer_name" : "rahul", 
"buyer_name" : "rahul", 
}
{ 
"_id" : "1258ecv57b-3853-46f4-af6c-cb1ca111137f", 
"order_number" : "1000123", 
"customer_name" : "Bruce", 
"buyer_name" : "Bruce", 
}
{ 
"_id" : "658ecv57b-3853-46f4-af6c-cb1ca1111312f", 
"order_number" : "1000123", 
"customer_name" : "mike", 
"buyer_name" : "mike", 
}
{ 
"_id" : "658ecv57b-3853-46f4-af6c-cb112111137f", 
"order_number" : "1000123", 
"customer_name" : "linda", 
"buyer_name" : "linda", 
}

推荐答案

您已经错过了SearchResultsList中map函数中的return.

You have missed the return in your map function in SearchResultsList.

this.props.items.sort(
          (a, b) => moment(b.order_date) - moment(a.order_date) || b.order_number - a.order_number)
.map((item, index) => {
               if (index >= start_offset && start_count < per_page ){
                    start_count++;
                    return <SearchResultsItem key={ item.id } item={ item } 
                           open={ this.props.open } />;
               }
         }

这篇关于Bootstrap在reactjs中的分页-数据来自MongoDB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！