Bootstrap 在 reactjs 中的分页 - 来自 MongoDB 的数据

Question

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

    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 对象。

{ 
"_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", 
}

Answer 1

您在SearchResultsList 的map 函数中错过了return。

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 } />;
               }
         }