Question

当用户停止键入并且运行良好时，我必须调用API。当按下回车键时，我必须安装。我做了一个Mock Component here来做到这一点。

但是，在卸载组件时，它显示错误Cannot call setState on an unmounted component。以前，我使用this.isMounted处理了此错误。现在，我正在尝试使用React Blog中提到的componentWillUnmount中的承诺取消来处理它。

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。因此，在cancellablePromise实例的componentWillUnMount中没有空对象。

Answer 1

看起来您只需要做以下事情：

# count all tokens, but not the punctuations
for i, row in data.iterrows():
    doc = nlp(row["name"] + " " + row["text"])
    data.set_value(i, "nr_token", len(list(map(lambda x: x.text, 
                                 filter(lambda x: x.pos_ != 'PUNCT', doc)))))

    # count only the adjectives
    for a in map(lambda x: x.lemma_, filter(lambda x: x.pos_ == 'ADJ', doc)):
        adjectives[a] += 1
    data.set_value(i, "nr_adj", len(list(map(lambda x: x.text, 
                                 filter(lambda x: x.pos_ == 'ADJ', doc)))))  

    # count only the nouns
    for n in map(lambda x: x.lemma_, filter(lambda x: x.pos_ == 'NOUN', doc)):
        nouns[n] +=1
    data.set_value(i, "nr_noun", len(list(map(lambda x: x.text, 
                                 filter(lambda x: x.pos_ == 'NOUN', doc)))))

    # count only the verbs
    for v in map(lambda x: x.lemma_, filter(lambda x: (x.pos_ == 'AUX') | (x.pos_ == 'VERB'), doc)):
        verbs[v] += 1
    data.set_value(i, "nr_verb", len(list(map(lambda x: x.text, 
                                 filter(lambda x: (x.pos_ == 'AUX') | (x.pos_ == 'VERB'), doc)))))

myAwesomeMethod = () => { this.cancellablePromise = makeCancelable(getSearchResults(word)); this.cancellablePromise .then(...) .catch(...) } componentWillUnmount() { this.cancellablePromise && this.cancellablePromise.cancel(); }仅在以下情况下才是未定义的：在使用promise call调用方法之前卸载组件。

Answer 2

问题是您的handleChange方法调用了debouncedGetSearchResult，但是您正在this.cancellablePromise中初始化getSearchResult。这为初始化卸载前留出了500ms的时间，以进行卸载。

您需要对此进行重新设计，以使去抖动成为可取消承诺的一部分，而不是在其之前。

如何在不使用this.isMounted的情况下取消componentWillUnmount（）中的promise？

2 个答案: