Tepki bileşeni onClick olayından sonra yeniden oluşturulmuyorClick olay

Question

Bir dizi tablo satırı bileşeni oluşturan CamperList adlı bir React bileşenim var. Tablo başlık etiketlerinin ikisinde, this.state.toggle arasında geçiş yapması ve tabloyu güncellemesi gereken onClick olayları var. Tüm Zaman Noktaları etiketini tıklattığımda, tablo güncellemeleri yapılır, ancak son 30 gün içindeki Puanları tıklattığımda bu etiket güncellenmez. kaleme

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> 
    ); 
    } 
}); 

Bağlantı: İşte kod http://codepen.io/ZacharyKearns/pen/dMvGNG/

Answer 1

Sizin render fonksiyonu hakkında akıl yürütme kodunuzu zorlaştırır içinde çok fazla iş mantığını sahiptir. Bu mantığı recent ve alltime işlevlerine taşıyın, böylece camper dizisini 'alltime veya recent özelliklerine göre yeniden sıralayın. otomatik hale işlevini çağırmak (sadece kullanıcı arayüzü öğeleri render edilmeli ve bunun herhangi bir mantığı yok) olacak

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

: Örneğin.