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。对线程进行排序时，只需更改数组元素的顺序。

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

如何在React.js

1 个答案: