reactjs - 根据日期字段排序显示记录mongodb

Question

我从mongodb获取记录并在reactjs中显示它。我想按日期字段的排序顺序呈现这些记录。请建议我。

我不使用芒果。只有Reactjs和mongodb。

class SearchResultsList extends React.Component { 
constructor(props) { 
super(props); 
this.state = { }; 
} 

render() { 
return (<tbody>{ this.props.items.map((item) => <SearchResults key={ item.id 
} item={ item } open={ this.props.open } />) }</tbody>); 
} 
} 

class SearchResults extends React.Component { 
constructor(props) { 
super(props); 
this.state = { }; 
} 

render() { 
return (
<tr onClick={ this.handleOpen } style={{color: 'blue',fontsize: '12',cursor: 
'pointer'}}> 
<td>{ this.props.item.OrderNumber }</td> 
<td>{ this.props.item.Assignee }</td> 
<td>{ this.props.item.Status }</td> 
<td>{ this.props.item.OrderDate }</td> 
<td>{ this.props.item.CreatedDate }</td> 
</tr> 
); 
} 

Answer 1

如果您以JSON格式接收数据，请将其转换为数组，然后根据您希望的数据字段进行排序。你可以使用下划线，lodash类库来准备使用方法。

编辑： 看到我的另一个答案，它显示了如何将对象转换为数组并对其进行排序。

React render model in sorted order on a field

Answer 2

你可以在条目分类到一个新的数组和渲染那些...

class SearchResultsList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {}; 

     this.renderItems = this.renderItems(); 
    } 

    renderItems() { 
     // using slice to avoid mutation 
     const items = this.props.items.slice().sort((a, b) => { 
      return b.date - a.date; // or some other logic to determine if a and b should be swapped 
     }); 

     items.map(item => 
      <SearchResults 
       key={item.id} 
       item={item} 
       open={this.props.open} 
      /> 
     ); 

    } 

    render() { 
     return (
      <tbody> 
       {this.renderItems()} 
      </tbody> 
     ); 
    } 
} 

class SearchResults extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {}; 
    } 

    render() { 
     return (
      <tr 
       onClick={this.handleOpen} 
       style={{ 
        color: "blue", 
        fontsize: "12", 
        cursor: "pointer" 
       }} 
      > 
       <td> 
        {this.props.item.OrderNumber} 
       </td> 
       <td> 
        {this.props.item.Assignee} 
       </td> 
       <td> 
        {this.props.item.Status} 
       </td> 
       <td> 
        {this.props.item.OrderDate} 
       </td> 
       <td> 
        {this.props.item.CreatedDate} 
       </td> 
      </tr> 
     ); 
    } 
}