Как обновить / перерисовать компонент только после завершения последнего XHR?

Question

Я пытаюсь оптимизировать компонент поиска в реальном времени, и главная проблема заключается в большом количестве запросов XHR при каждом изменении ввода.После каждого письма добавляется новый запрос к серверу, и запросы выполняются по-разному.Итак, последний завершенный XHR (фактически это первый XHR, потому что он часто возвращает все данные) испускает рендеринг компонента.Как я могу обновить компонент только после последнего вызванного XHR?

Пример на изображении: Мне нужно обновить компонент только после завершения 2 XHR, но теперь он обновляется после каждого завершения XHR и последнегоданные в компоненте взяты из 1 XHR, поскольку для их завершения требуется больше времени.

Существует мой метод componentDidUpdate:

componentDidUpdate(prevProps) {
    if (!isEqual(this.props.userFilterData, prevProps.userFilterData)) {
        const {
            userFilterData,
            initPagination
        } = this.props;
        user
            .find(userFilterData)
            .then(() => initPagination(user.selectors.find(userFilterData)));
    }
}

Answer 1

Вместо запуска поискового запроса при каждом изменении ввода.Вы должны debounce событие, чтобы XHR запускался только один раз в течение pex X мс (300-400 мс).Чтобы гарантировать, что только последний XHR-запрос будет обработан, вы должны отменить запущенные ранее.

Если вы используете axios, вы можете отменить запрос на документы.У других библиотек могут быть разные методы