Question

我正在使用这个FreeCodeCamp排行榜表，当点击突出显示的表格标题时，应用程序会调用此网址 https://fcctop100.herokuapp.com/api/fccusers/top/ 最近 或此< em> https://fcctop100.herokuapp.com/api/fccusers/top/ alltime 因此在过去30天或所有时间的最高点之间进行排序。

我的问题是我必须点击两次才能获得所需的结果。在我CamperLeaderboard的{{1}}组件handleSort函数中，状态在我点击两次之前不会改变

点击一次

console.log

点击两次

handleSort = (sort) => {
  console.log(sort);  // alltime
  console.log(this.state.sort)  //recent
  this.setState({ sort: sort });
  console.log(this.state.sort)  //recent
  this.getData();
};

这是CodePen preview，以下是完整代码

handleSort = (sort) => {
  console.log(sort);  // alltime
  console.log(this.state.sort)  //alltime
  this.setState({ sort: sort });
  console.log(this.state.sort)  //alltime
  this.getData();
};

Answer 1

我相信@ finalfreq的解释是正确的，这是如何解决它。

更新CamperLeaderboard类的handleSort方法，如下所示：

handleSort = (sort) => {
  this.setState({ sort: sort });
  // You don't need to read sort from state. Just pass it :)
  this.getData(sort);
}

ReactJS状态没有变化

1 个答案: