2017-08-02 87 views
0

我從mongodb獲取記錄並在reactjs中顯示它。我想按日期字段的排序順序呈現這些記錄。請建議我。reactjs - 根據日期字段排序顯示記錄mongodb

我不使用芒果。只有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> 
); 
} 
+0

請提供更多的信息。你的後端表達了嗎?你在用mongooose嗎?也許張貼負責渲染數據的組件的片段。 –

+0

請找到我上傳的代碼。我正在用mongodb使用reactjs。 – Karthikeyan

回答

0

如果您以JSON格式接收數據,請將其轉換爲數組,然後根據您希望的數據字段進行排序。你可以使用下劃線,lodash類庫來準備使用方法。

編輯: 看到我的另一個答案,它顯示瞭如何將對象轉換爲數組並對其進行排序。

React render model in sorted order on a field

+0

我們是否有任何示例代碼。,新的reactjs ... – Karthikeyan

0

你可以在條目分類到一個新的數組和渲染那些...

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

這是行不通的。它沒有顯示日期字段本身。 – Karthikeyan