javascript - 如何在 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 数据的对象中。

保留一个单独的数组，其中包含按照您想要排序的顺序的threadId。当您对线程进行排序时，您仅更改数组元素的顺序。

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