ReactコンポーネントはonClickイベント後に再レンダリングされません

Question

私は、テーブル行コンポーネントの配列をレンダリングするCamperListというReactコンポーネントを持っています。 2つのテーブルヘッドタグには、on.state.toggleを切り替えてテーブルを更新するはずのonClickイベントがあります。 All Time Pointsタグをクリックするとテーブルが更新されますが、過去30日間のタグをクリックすると更新されません。ペンに

var CamperList = React.createClass({ 
getInitialState: function() { 
    return { 
    recent: [], 
    toggle: true 
    }; 
}, 
componentDidMount: function() { 
    $.get('http://fcctop100.herokuapp.com/api/fccusers/top/recent', function(data) { 
     this.setState({ 
     recent: data 
     }); 
    }.bind(this)); 
    }, 
recent: function() { 
    this.setState({toggle: true}); 
}, 
alltime: function() { 
    this.setState({toggle: false}); 
}, 
render: function() { 
    var camperNodes; 
    if (this.state.toggle) { 
    camperNodes = this.state.recent.map(function(camper, index) { 
     return (
     <Camper index={index + 1} username={camper.username} recent={camper.recent} alltime={camper.alltime} /> 
    ); 
    }); 
    } else { 
    var alltime = this.state.recent; 
    alltime = alltime.sort(function(a,b) { 
     return b.alltime - a.alltime; 
     }) 
    camperNodes = alltime.map(function(camper, index) { 
     return (
     <Camper index={index + 1} username={camper.username} recent={camper.recent} alltime={camper.alltime} /> 
    ); 
    }); 
    } 
    return (
    <table className="table"> 
     <thead className="blue"> 
     <tr> 
     <th>#</th> 
     <th>Camper Name</th> 
     <th onClick={this.recent}>Points in past 30 days</th> 
     <th onClick={this.alltime}>All time points</th> 
     </tr> 
     </thead> 
    <tbody> 
    {camperNodes} 
    </tbody> 
    </table> 
    ); 
    } 
}); 

リンク：ここではコードですhttp://codepen.io/ZacharyKearns/pen/dMvGNG/

Answer 1

あなたrender機能はについて推論するようにコードを困難にし、その中にあまりにも多くのビジネスロジックを、持っています。この論理をrecentとalltimeの関数に移動し、オブジェクトのalltimeまたはrecentのプロパティに従ってcamper配列を再ソートします。例：

alltime: function() { 
    var sortedArr = []; 
    //sort the array from highest alltime to lowest 
    this.setState({ 
     recent: sortedArr 
    }) 
} 

これは、自動的にレンダリング機能（UI要素をレンダリングするだけで、ロジックを持たない）を呼び出します。