ReactJS：通過對象的某個屬性來訂購存儲在this.state中的JSON對象

Question

我正在使用ReactJS做我的Rails應用程序的前端。我有一個由表格行組成的表格組件，每行都由存儲在表格組件狀態中的對象填充。這些對象是通過對我的rails後端進行ajax調用獲得的。當回調函數返回時，我將結果設置爲名爲'data'的狀態。

在渲染函數中，我將每個對象傳遞給一個名爲TableRow的子組件。我將所有TableRow子組件的集合存儲在一個變量中，並將它們呈現在JSX中以顯示所有行。

現在的問題是：如何組織每行由該行代表的對象中的某個屬性組成？在這種情況下，每一行代表一個「採訪」對象，每個採訪都有一個採訪日期屬性。假設我想按他們的日期組織所有采訪，然後按照這個順序呈現他們，我該怎麼做？

我嘗試的一種方法是嘗試將所有對象傳遞給排序算法（合併排序或快速排序），再按正確順序製作另一個具有對象的數組，然後使用this.setState來重置狀態新陣列。問題是我根本無法訪問對象的屬性。當我嘗試console.log(interviewObject.interviewDate)時，我看到一個瀏覽器錯誤，說interviewDate不是一個函數。我搜索了一下，似乎瀏覽器不會將JSON對象計爲實際的JavaScript對象（請不要在此引用我，我可能是錯的）。

另一種方法是可能嘗試使用ruby對服務器端的對象進行排序，但我真的想在客戶端執行此操作，因爲在某些時候我想要一個函數，用戶可以在其中單擊列的表中，並讓行重新排序，並且每當用戶想要重新排列已經在客戶端的一些數據到服務器時，向服務器發出大量的ajax請求似乎是多餘的，凌亂的並容易出錯。

那麼是否有可能的解決方案在客戶端執行此操作？這是我的代碼供您參考。

var ContentTable = React.createClass({ 
    getInitialState: function(){ 
    return ({ 
     data:'' 
    }) 
    }, 
    getData: function(){ 
    console.log('requesting data...') 
    $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     success: function(results) { 
      this.setState({data:results}) 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    componentDidMount: function(){ 
    this.getData(); 
    }, 
    handleUpdate: function(){ 
    this.getData(); 
    }, 
    render: function() { 
    var dataArray=[] 

    for (var key in this.state.data){ 
     dataArray.push(this.state.data[key]) 
    } 

    //define table headers and other properties to pass down to row component 
    var tableHeaderArray=[] 
    for (var header in dataArray[0]){ 
     if(header!=="id"){ 
      tableHeaderArray.push(header) 
     } 
    } 
    var url=this.props.url 
    var handleUpdate = this.handleUpdate 
    var dataModel=this.props.model 


    var tableHeaders= tableHeaderArray.map(function(header){ 
     return <th key={header}> {header}</th> 
    }) 


    var tableRows= dataArray.map(function(data){ 
     return <TableRow url={url} model={dataModel} handleUpdate={handleUpdate} headers={tableHeaderArray} data={data} key={"interview "+data.id} /> 
    }) 
    return (
     <div className="widget-content"> 
      <table className="table table-striped table-bordered"> 
      <thead> 
       <tr> 
       {tableHeaders} 
       <th>Actions</th> 
       </tr> 
      </thead> 
      <tbody> 
       {tableRows} 
      </tbody> 
      </table> 
     </div> 
    ); 
    } 
}); 

Answer 1

這個邏輯肯定應該在前端。這絕對不是應該給予後端處理的東西。

我對React並不瞭解，但在Ember中我們使用可排序的mixin，它的原理幾乎相同。

這裏你去 - https://github.com/danielstocks/react-sortable