reactjs - 日付フィールドに基づいてソートされた順序でレコードを表示します。mongodb

Question

mongodbからレコードをフェッチしてreactjsに表示しています。これらのレコードを日付フィールドに並べ替えて並べ替えます。私に提案してください。

モンゴーを使用していません。 Reactjsとmongodbだけ。

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