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を持つ別の配列を保持します。スレッドをソートするときは、配列の要素の順序を変更するだけです。

データを別の方法でソートする場合は、制約に基づいてソートするアクションをディスパッチします。スレッドをレンダリングするのは、配列上でマップを実行して適切なスレッドを取得するのと同じくらい簡単です。