Обновление состояния компонента в AJAX xhr

Question

У меня ниже Ajax call как мне обновить состояние компонента при успехе / ошибке?

$.ajax({
        method: 'POST',
        type: 'POST',
        url: "http://localhost:8080",
        crossDomain: true,
        processData: false,
        contentType: false,
        data: formData,
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", progressHandler(evt, data.key), false);
            return xhr;
        },
        success: function(data){
          //Do something success-ish
          console.log("DONE" + data);
        },
        error: function(xhr) {
            alert(xhr.status);
            alert(xhr.statusText);
        }
    });

У меня есть ниже для progressHandler

this.progressHandler = this.progressHandler.bind(this); 

и в обработчике прогресса следующим образом

progressHandler = (evt, key) => {
    if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        const { data } = this.setState;
        data[key].progress = percentComplete;
    }
}

Это правильный способ сделать это?Есть ли лучший способ для функций успеха / ошибки?

Answer 1

Итак, у вас есть компонент, который имеет некоторое состояние.В его ComponentDidMount (вероятно) вы должны сделать запрос;а затем в случае успеха или неудачи вызовите setState с любым состоянием, с которым вы хотите обновить компонент.

Вот несколько документов React, подробно описывающих эти шаги: Ajax и API

Из этого документа:

Вы должны заполнить данные вызовами AJAX в методе жизненного цикла componentDidMount.Это позволяет использовать setState для обновления вашего компонента при получении данных.