React JS Dynamic Data Fetching

Вы можете создать функцию специально для выборки данных и вызвать ее внутри componentDidMount() для первоначального монтажа компонента, а затем прикрепить функцию как обработчик событий для onClick к кнопке. Сохраните данные ответа из выборки внутри состояния компонента. Когда кто-то нажимает кнопку, данные будут извлечены повторно, запустив обновление состояния, а затем повторную визуализацию.

Вы можете посмотреть раздел ловушек жизненного цикла. Есть намного больше, чем просто эти двое.

https://reactjs.org/docs/react-component.html

Имейте в виду, что некоторые методы, такие как componentWillMount, устарели. Я бы держался от них подальше.

Просто вызовите функцию нажатием кнопки и вызовите api и в ответе на успех api setState () компонента

  handleOnClick=()=>{
   //fetchData and here 
   this.setState({data})
  }