Как отменить обещание в componentWillUnmount () без использования this.isMounting?

Question

Я должен вызывать API, когда пользователь перестает печатать, и он работает отлично.И я должен смонтировать, когда нажата клавиша ввода.Я сделал Mock Component здесь , который делает это.

Но, когда компонент отключен, он показывает ошибку Cannot call setState on an unmounted component.Ранее я обработал эту ошибку с this.isMounted.Теперь я пытался справиться с этим с помощью отмены обещаний в componentWillUnmount, как упомянуто в React Blog .

this.cancellablePromise = makeCancelable(getSearchResults(word));

      this.cancellablePromise.promise
        .then(res => {
          console.log({ res });
          this.setState({ values: res });
        })
        .catch(err => console.log("error", err));
      console.log("in data ", this.cancellablePromise);
    }

CancellablePromise назначается после выполнения обещания.Поэтому в componentWillUnMount есть нулевой объект для экземпляра cancellablePromise.

Answer 1

Проблема в том, что ваш handleChange метод вызывает debouncedGetSearchResult, но вы инициализируете this.cancellablePromise в getSearchResult.Это оставляет окно 500 мсек для того, чтобы демонтирование могло произойти до того, как вы инициализировали this.cancellablePromise.

. Вам необходимо переработать это так, чтобы дебасинг был частью отменяемого обещания, а не предшествовал ему.

Answer 2

Похоже, вам просто нужно сделать следующее:

myAwesomeMethod = () => {
    this.cancellablePromise = makeCancelable(getSearchResults(word));
    this.cancellablePromise
        .then(...)
        .catch(...)
}

componentWillUnmount() {
    this.cancellablePromise && this.cancellablePromise.cancel();
}

this.cancellablePromise будет неопределенным только в случае, когда вы размонтируете свой компонент перед вызовом метода с вызовом обещания.