ReactJS государства, не изменяя

Question

Я работаю на этом FreeCodeCamp таблице лидеров таблицы и и при нажатии на выделенном столе заголовка приложение вызывает либо этот адрес https://fcctop100.herokuapp.com/api/fccusers/top/недавний или это один https://fcctop100.herokuapp.com/api/fccusers/top/Alltime таким образом сортировки между кемперов с наивысшие баллы за за последние 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 верное, и вот как это исправить.

Update handleSort метод класса CamperLeaderboard как это:

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