Javascript ReactJS：根据对象的特定属性对存储在this.state中的JSON对象进行排序

我正在用ReactJS做rails应用程序的前端。我有一个由表行组成的表组件，每一行都由一个存储在表组件状态中的对象填充。这些对象是通过对我的rails后端进行ajax调用获得的。当回调返回时，我将结果设置为状态为“data”的属性

在render函数中，我将每个对象传递到名为TableRow的子组件中。我将所有TableRow子组件的集合存储在一个变量中，并在JSX中呈现它们以显示所有行

问题是：如何根据此行所代表的对象中的特定属性组织每一行？在这种情况下，每行代表一个“面试”对象，每个面试都有一个interviewDate属性。假设我想按日期组织所有采访，然后按顺序呈现，我该怎么做

我尝试的一种方法是尝试将所有对象传递到一个排序算法（合并排序或快速排序），以正确的顺序使用对象创建另一个数组，然后使用

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

var ContentTable=React.createClass({
getInitialState:函数（）{
返回({
数据：“”
})
},
getData:function（）{
console.log（'请求数据…'）
$.ajax({
url:this.props.url，
数据类型：“json”，
成功：功能（结果）{
this.setState（{data:results}）
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
componentDidMount:function（）{
这是getData（）；
},
handleUpdate:function（）{
这是getData（）；
},
render:function（）{
var dataArray=[]
for（此.state.data中的var键）{
dataArray.push（this.state.data[key]）
}
//定义要传递到行组件的表标题和其他属性
var tableHeaderArray=[]
for（数据数组[0]中的var标头）{
如果（标题！=“id”）{
表格标题排列推送（标题）
}
}
var url=this.props.url
var handleUpdate=this.handleUpdate
var dataModel=this.props.model
var tableHeaders=tableHeaderArray.map（函数（标题）{
返回{header}
})
var tableRows=dataArray.map（函数（数据）{
回来
})
返回(
{tableHeaders}
行动
{tableRows}
);
}
});

这个逻辑肯定应该在前端。这绝对不是应该交给后端处理的事情

我对React知之甚少，但在Ember中我们使用了一个可排序的mixin，其原理基本相同

---

现在-

为什么不对数组进行排序呢？数组包含对象，javascript不知道通过检查数组的方法对数组进行排序的属性。如果需要，可以指定自己的比较函数。所以，只需执行：

myarr.sort（函数（a，b）{//这里的逻辑决定哪一个先到）