Выполнение вызова AJAX в React после нажатия кнопки?

Question

Я довольно новичок в React, но я пытаюсь вызвать вызов AJAX при нажатии определенной кнопки c. Я использую метод XMLHttpRequest следующим образом:

getAssessment() {
    const data = this.data //some request data here
    const url = this.url   // API URL
    const promiseObj = new Promise(function(resolve, reject) {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', url, true)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify(data))
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log('Request processed successfully')
            const resp = xhr.responseText
            const respJson = JSON.stringify(resp)
            resolve(respJson)
          } 
        }
      }
    }})
    return promiseObj
  }

В моем файле base.tsx определен простой класс компонента React:

class DecisionBase extends React.Component<any, any> {
...
public render(){
        return(
            <div>
                <button
                   onClick = {//what can i put here?}
                >Submit</button>
            </div>
        )
}

Во всех сетевых источниках что я прочитал, этот AJAX вызов помещается в метод componentDidMount(). Я намерен также извлечь данные из API, поэтому я не уверен, как спроектировать этот аспект. У кого-нибудь есть предложения?

Answer 1

Часто мы пытаемся получить некоторые данные для отображения при монтировании компонента, поэтому многие учебные пособия направлены на то, чтобы показать, как это сделать в componentDidMount. Рекомендуется, чтобы ваши функции обработки данных были их собственными объектами. Это учитывает второй общий тип выборки данных, некоторые состояния или измененные свойства изменяются, и их необходимо повторно загружать, другими словами в componentDidUpdate.

Это может показаться слишком простым, но просто установить обратный вызов.

<button
  onClick={this.getAssessment}
>
  Submit
</button>

Или как анонимная функция

<button
  onClick={() => this.getAssessment()}
>
  Submit
</button>

Похоже, что getAssessment на самом деле просто функция, которая выполняет запрос и возвращает обещание. Вы можете создать onClickHandler, который вызывает getAssessment и либо ожидает разрешения для обновления состояния, либо использует возвращенную цепочку обещаний Promise.

onClickHandler = () => {
  this.getAssessment()
    .then(...) // <-- update state with response data
    .catch(...) // <-- or set some error state maybe?
}

Затем используется в качестве обратного вызова

<button
  onClick={this.onClickHandler}
>
  Submit
</button>