Javascript 在onClick事件之后，React组件不会重新渲染

我有一个名为CamperList的React组件，它呈现一个表行组件数组。其中两个表头标记具有onClick事件，用于切换this.state.toggle并更新表。当我单击“所有时间点”标记时，表格会更新，但当我单击“过去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>
    );
  }
});

var CamperList=React.createClass({
getInitialState:函数（）{
返回{
最近：[]，
切换：真
};
},
componentDidMount:function（）{
$.get（'http://fcctop100.herokuapp.com/api/fccusers/top/recent，函数（数据）{
这是我的国家({
最近：数据
});
}.约束（这个）；
},
最近：函数（）{
this.setState（{toggle:true}）；
},
alltime:function（）{
this.setState（{toggle:false}）；
},
render:function（）{
变异钟状节；
if（this.state.toggle）{
camperNodes=this.state.recent.map（函数（camper，索引）{
返回(
);
});
}否则{
var alltime=this.state.recent；
alltime=alltime.sort（函数（a，b）{
返回b.alltime-a.alltime；
})
camperNodes=alltime.map（函数（camper，索引）{
返回(
);
});
}
返回(
#
露营者姓名
过去30天的积分
所有时间点
{camperNodes}
);
}
});

---

指向pen的链接：

您的

渲染

函数中有太多的业务逻辑，这使得您的代码难以推理。将该逻辑移到

recent

和

alltime

函数中，以便它们根据对象的

alltime

或

recent

属性对露营车数组进行重新排序。例如：

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

---

这将自动调用render函数（该函数应该只渲染UI元素，而不包含任何逻辑）。

您的

render

函数包含太多的业务逻辑，这使得您的代码难以推理。将该逻辑移到

recent

和

alltime

函数中，以便它们根据对象的

alltime

或

recent

属性对露营车数组进行重新排序。例如：

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

---

这将自动调用render函数（该函数应该只渲染UI元素，而不包含任何逻辑）。

您希望发生什么？我很确定click事件处理程序工作得很好，但是渲染逻辑不正确（不知怎么的）。不幸的是，如果你不告诉我们你想要实现什么，我们就无法真正帮助你。我假设您希望数据以不同的方式排序，但您没有解释如何排序。到目前为止，您一直只按

对数据进行排序。很抱歉，当
出现这种情况时。recent
将
toggle
激发并设置为
true
我希望组件使用按最近点排序的列表重新渲染。但您从不按最近点排序。您希望发生什么？我很确定click事件处理程序工作得很好，但是渲染逻辑不正确（不知怎么的）。不幸的是，如果你不告诉我们你想要实现什么，我们就无法真正帮助你。我假设您希望数据以不同的方式排序，但您没有解释如何排序。到目前为止，您始终只按
始终
对数据进行排序。很抱歉，当
发生此情况时。最近
触发并将
切换
设置为
真
我希望组件使用按最近点排序的列表重新渲染。但您永远不会按最近点排序。