reactjs分页 - 无法渲染props.item

时间:2017-10-14 18:30:46

标签: javascript reactjs pagination

我试图在reactjs应用程序中进行分页。请找到以下代码。

最后我无法呈现列表。它给出了空白列表。有人可以帮我解决这里的错误。?

请找到完整的代码。从渲染列表和分页组件的位置添加了组件,仅在此类中添加。

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

return (
<table className="table table-hover"  style={{
minWidth: 600,
}} >
<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>
); 
}
}

请找到演示数据:

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

由于

0 个答案:

没有答案