Javascript 单击两次后，React click handler函数开始工作

我正在参加来自FreeCodeCamp的“露营者排行榜”挑战赛。因此，我必须实现这样一件事：“我可以根据他们在过去30天内获得的布朗尼点数和他们总共获得的布朗尼点数对列表进行排序。”
我将onclick处理程序添加到列表的标题单元格中，但它在元素上单击两次后更改了视图，而不是单击一次。简而言之：
\u handlerAll（）和\u handler30（）在连续两次单击后执行，而不是一次。 代码如下：

“严格使用”；
类TableBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
sortAllTime：是的
};
}
loadCampersFromServer（）{
让templateURL为空https://fcctop100.herokuapp.com/api/fccusers/top/';
让url=（this.state.sortAllTime）？（templateURL+'alltime'）：（templateURL+'recent'）；
获取（url）
.那么(
（回应）=>{
如果（response.status！==200）{
log（'看起来有问题。状态代码：${response.Status}'）；
返回；
}
response.json（）。然后（（数据）=>{
this.setState（{data:data}）；
})
}
)
.catch（函数（err）{
log（'Fetch Error:-S'，err）；
});
}
_韩德拉尔（）{
this.setState（{sortAllTime:true}）；
这个.loadCampersFromServer（）；
console.log（'all'）；
}
_handler30（）{
this.setState（{sortAllTime:false}）；
这个.loadCampersFromServer（）；
console.log（'notAll'）；
}
componentDidMount（）{
这个.loadCampersFromServer（）；
}
render（）{
返回；
}
}
类CamperList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
让campersNodes=this.props.\u data.map（（元素，索引）=>{
返回(
);
});
返回(
#
露营者的名字
过去30天的积分
所有时间点
{campersNodes}
)
}
}
类Camper扩展React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.index+1}
{this.props.user.username}
{this.props.user.recent}
{this.props.user.alltime}
)
}
}
ReactDOM.render（，document.getElementById（'root'））
div#root{
保证金：0自动；
宽度：50%；}
img{
宽度：32px；}
跨度{
填充：20px 5px；}
桌子{
字体系列：“Arial”；
保证金：25像素自动；
边界塌陷：塌陷；
边框：1px实心#eee；
边框底部：2个实心#ccc0b8；
盒子阴影：0px 0px 20px rgba（0,0,0,0.1），0px 10px 20px rgba（0,0,0,0.05），0px 20px 20px rgba（0,0,0,0,0.05），0px 30px 20px rgba（0,0,0,0.05）；}
表tr：悬停{
背景：#f4；}
表tr：悬停td{
颜色：#555；}
表tr th，表tr td{
颜色：#999；
边框：1px实心#eee；
填充：12px 35px；
边框折叠：折叠；}
表tr-th{
背景#619d9f；
颜色：#fff；
文本转换：大写；
字体大小：12px；}
表tr th.last{
右边框：无；}

本部分内容与以下内容相关：

setState（）
不会立即改变此.state，但会创建挂起的状态转换。调用此方法后访问
this.state
，可能会返回现有值

这正是您正在做的：您正在调用
this.setState（{sortAllTime:true}）
并立即访问
loadCampersFromServer
中的
this.state.sortAllTime
。但这会返回旧值。因此，即使最终状态被更新，您加载的数据仍然是“旧”数据。只有在下一次（第二次）单击时，才会加载所需的数据


相反，将
sortAllTime
的值传递给
loadCampersFromServer
，并将
sortAllTime
的状态值与
数据一起设置：

loadCampersFromServer(sortAllTime) {
  // perform Ajax request to get `data` for `sortAllTime`
  // ...
  this.setState({sortAllTime, data});
  // ...
}



“严格使用”；
类TableBox扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
sortAllTime：是的
};
}
loadCampersFromServer（sortAllTime）{
让templateURL为空https://fcctop100.herokuapp.com/api/fccusers/top/';
让url=sortAllTime？（templateURL+'alltime'）：（templateURL+'recent'）；
获取（url）
.那么(
（回应）=>{
如果（response.status！==200）{
log（'看起来有问题。状态代码：${response.Status}'）；
返回；
}
response.json（）。然后（（数据）=>{
this.setState（{data，sortAllTime}）；
})
}
)
.catch（函数（err）{
log（'Fetch Error:-S'，err）；
});
}
_韩德拉尔（）{
此.loadCampersFromServer（true）；
}
_handler30（）{
此.loadCampersFromServer（false）；
}
componentDidMount（）{
这个.loadCampersFromServer（）；
}
render（）{
返回；
}
}
类CamperList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
让campersNodes=this.props.\u data.map（（元素，索引）=>{
返回(