javascript - ReactJS 状态没有改变

Question

这个问题已经有答案了:

Why does calling react setState method not mutate the state immediately? (10 个回答)

已关闭 6 年前。

我正在处理这个 FreeCodeCamp 排行榜表，当单击突出显示的表标题时，应用程序会调用此 url https://fcctop100.herokuapp.com/api/fccusers/top/ 最近或这个 https://fcctop100.herokuapp.com/api/fccusers/top/ 所有时间，从而对过去 30 天或所有时间得分最高的营员进行排序。

我的问题是我必须单击两次才能获得所需的结果。在 CamperLeaderboard组件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();
};

点击两次

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

这是CodePen preview下面是完整的代码

/**
  Table body component
*/
class Table extends React.Component {
  handleSort = (e, sort) => {
    this.props.handleSort(sort);
  };

  renderCampers = (key, count) => {
    const camper = this.props.campers[key];
    return(
      <tr key={key}>
        <td>{count}</td>
        <td>
          <a href={`https://www.freecodecamp.com/${camper.username}`} target='_blank'>
            <img src={camper.img} />
            {camper.username}
          </a>
        </td>
        <td className='center'>{camper.recent}</td>
        <td className='center'>{camper.alltime}</td>
      </tr>
    )
  };

  render() {
    let count = 0;
    return (
      <div>
        <table>
          <caption>Leaderboard</caption>
          <tr>
            <th>#</th>
            <th>Camper Name</th>
            <th onClick={(e) => this.handleSort(e, 'recent')}><a href='javascript:void(0)'>Points in the past 30 days</a></th>
            <th onClick={(e) => this.handleSort(e, 'alltime')}><a href='javascript:void(0)'>All time points</a></th>
          </tr>
          {Object.keys(this.props.campers).map(key => {
            count++;
            return this.renderCampers(key, count);
          })}
        </table>
      </div>
    );
  }
}

/**
  Container
*/
class CamperLeaderboard extends React.Component {
  state = {
    campers: [],
    sort: 'recent'
  };

  getData() {
    let url = `https://fcctop100.herokuapp.com/api/fccusers/top/${this.state.sort}`
    const self = this;
    axios.get(url)
      .then(function (response) {
        self.setState({ campers: response.data });
        //console.log(self.state.campers);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  componentWillMount() {
    this.getData();
  }

  handleSort = (sort) => {
    this.setState({ sort: sort });
    this.getData();
  };

  render() {
    return (
      <div>
        <p>Click links in table header to sort</p>
        <Table campers={this.state.campers} 
              handleSort={this.handleSort} />
      </div>
    );
  }
}

ReactDOM.render(<CamperLeaderboard />, document.getElementById('app'));

/*
To get the top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent.
To get the top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime.
*/

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