Как использовать Axios для вызова второго запроса на получение API после componentDidMount после взаимодействия пользователя с вашим приложением?

Question

Я использую Axios для вызова API (запроса get) внутри метода жизненного цикла componentDidMount.

Работает нормально, я получаю свой результат и сохраняю данные с помощью setState.

componentDidMount(){
   axios.get("https://myAPI/v1/myAPI-Endpoint?myAPI-Key=12345678910abcdef")
     .catch(error => console.log('Error', error))
     .then(
       (response) => {
         let data = response.data;
         this.setState({
           myFetchedData: data
         });
       },
     )
}

• Затем я использую данные, выбранные для заполнения ввода автозаполнения, и как только пользователь выбирает значение, я хочу сделать еще один вызов API с выбранным значением

Вопрос:

• Где мне теперь делать второй вызов API, я предполагаю, что не могу сделать это в componentDidMount, поскольку компонент уже смонтирован?

• Итак, какова лучшая практика здесь? Где я должен выполнить вызов API, который запускается действием пользователя?

Answer 1

Ваш компонент автозаполнения, скорее всего, будет иметь какое-то событие, которое сработает, когда будет сделан выбор (что-то вроде 'onChange', 'onSelect' и т. Д., Это зависит от компонента).

Затем вы можете сделать что-то вроде этого (в вашей функции рендеринга):

<AutoComplete
  onSelect={this.handleAutoCompleteSelect}
  …
/>

и затем внутри класса компонента:

…
handleAutoCompleteSelect (value) {
  axios.get(apiEndpont, { value }) // Exact request depends on your api implementation
    .catch(…)
    .then(function (res) {
      // Process request result here
    })
}