Как по клику заново отправить запрос AJAX через React?

Question

[townee]

Привет!
Как можно заново отправить AJAX запрос по клику, вот мой код:

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            category: 'business',
            items: []
        }
    }

    componentDidMount() {
        axios.get('https://newsapi.org/v2/top-headlines?country=us&category='+this.state.category)
            .then(res => {
                this.setState({items: res.data.articles});
            })
    }
changeCategory() {
        this.setState({category: 'entertainment'});
        console.log(this.state.category);
    }


  render() {
     
    return (
        <div className='wrapper'>
            <button onClick={this.changeCategory.bind(this)}>CLICK</button>
        </div>
    );
  }
}

Сейчас я меняю категорию, но страница не обновляется, как возможно по клику сделать еще один запрос ?
Спасибо!

Answer 1

[Антон Спирин]

class App extends React.Component {
  state = {
    category: 'business',
    items: [],
  };

  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    axios.get('https://newsapi.org/v2/top-headlines?country=us&category='+this.state.category)
      .then(res => {
      this.setState({ items: res.data.articles });
    });
  }
  
  changeCategory = () => {
    this.setState(
      { category: 'entertainment' },
      this.fetchData,
    );
  };


  render() {
    return (
      <div className='wrapper'>
        <button onClick={this.changeCategory}>CLICK</button>
      </div>
    );
  }
}