ReactJS:按照对象的某个属性对存储在this.state中的JSON对象进行排序

Question

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

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

问题是:如何通过该行表示的对象中的某个属性来组织每行？在本例中，每一行代表一个' interview‘对象，每个interview都有一个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>
      );
    }
});

Answer 1

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

我不太了解React，但在Ember中我们使用了一个可排序的混入，它的原理与此基本相同。

给你- https://github.com/danielstocks/react-sortable