如何在 React.js 中对数据对象数组进行排序

Question

我正在尝试实现一种简单的方法来对从 React 中的服务器提取的数据数组进行排序。下面显示的我使用的实现可能不是最好的方法，但我觉得它应该工作，但不是。似乎从未调用排序函数，并且数据以从服务器传入的默认顺序显示。

我正在尝试使一个简单的orderByRecent 函数反转数据的顺序，该顺序按时间顺序返回。我知道有一些方法可以完成这个服务器端，但这只是一个更复杂的客户端排序的实验。

排序功能：

orderByDate: (threads) => {
    return threads.sort((a, b) => {
        return Date.parse(a.date) > Date.parse(b.date)
    })
},

Feed.js：

class ThreadList extends Component {
  render() {
    var threadNodes, sortedThreadNodes
    if (this.props.data) {
      var sorted = this.props.sortFunc(this.props.data)
      var threadNodes = sorted.map(function (thread) {
        return (
          <Thread victim={ thread.victim } 
                  date={ thread.date }
                  author={ thread.author } 
                  ct={ thread.included.length }
                  likes={ thread.likes } 
                  dislikes={ thread.dislikes }
                  id={ thread._id}
                  key={ thread._id }>
            { thread.text }
          </Thread>
        )
      })
    }
    return (
      <div className="threadList">
        { threadNodes }
      </div>
      )
  }
}

var ThreadsBox = React.createClass({
  handleThreadSubmit: function (thread) {
    var threads = this.props.feed
    var newThreads = threads.concat([thread])
    this.setState({feed: newThreads})
    $.ajax({
      url: config.apiUrl + 'threads',
      dataType: 'json',
      type: 'POST',
      data: thread,
      xhrFields: {withCredentials: true},
      success: function (data) {
        // this.setState({feed: feed})
      }.bind(this),
      error: function (xhr, status, err) {
        this.setState({data: threads})
        console.log(this.url, status, err.toString())
      }.bind(this)
    })
  },
  // Feed nav buttons default to order by date
  getInitialState: function () {
    return {feed: [], sortFunc: helpers.orderByDate}
  },

  changeState: function (state, value) {
    this.setState({[state]: value})
  },

  render: function () {
    return (
    <div className="threadsBox">
      <ThreadForm friends={this.props.friends}
                  onThreadSubmit={ this.handleThreadSubmit }/>
      <div className="feedNav">
        <NavButtonList divId={"feedNav"}
                       eventFunc={this.changeState} 
                       state={"sortFunc"} 
                       buttons={buttonObs.mainNavButtons} />
      </div>
      <ThreadList data={ this.props.feed }
                  sortFunc={ this.state.sortFunc } />

    </div>
    )
  }
})


module.exports = ThreadsBox

Answer 1

这是一种不同的方法。

将您的线程保存在将threadId 映射到实际Thread 数据的对象中。

保留一个包含threadIds 的单独数组，按照您希望对它们进行排序的顺序。当您对线程进行排序时，您只需更改数组元素的顺序。

如果您想对数据进行不同的排序，请调度一个将根据您拥有的任何约束进行排序的操作。渲染线程就像在数组上执行映射并获取正确的线程一样简单。