反応コンポーネントがアンマウントされているかどうかを確認する方法はありますか？

Question

私は私の反応コンポーネントをアンマウントする必要があるユースケースを持っています。しかし、場合によっては、特定の反応成分が異なる機能によってアンマウントされる。 したがって、コンポーネントをアンマウントする前にコンポーネントがマウントされているかどうかを確認する必要があります。 isMounted()が正式に廃止されているので

Answer 1

、あなたはあなたのコンポーネントでこれを行うことができます。

componentDidMount() { 
    this._ismounted = true; 
} 

componentWillUnmount() { 
    this._ismounted = false; 
} 

独自のstate変数を維持する。このパターンはReactJSドキュメントの詳細です：私は、ことがわかっhttps://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

Answer 2

コンポーネントはアンマウントされ、生成されます。var

if(!this._calledComponentWillUnmount)this.setState({vars});

Answer 3

私はAPIをpollingで停止する方法を探していたので、ここに来ました。

react docsは、websocketのケースをカバーしますが、ポーリングケースはカバーしません。

私はそれが動作することを中心に

// React component 
let allowPolling = true 

React.createClass({ 
    poll() { 
     if (!allowPolling) { 
      return 
     } 
     // otherwise, call the api 
    } 
    componentWillMount() { 
     allowPolling = true 
    } 
    componentWillUnmount() { 
     allowPolling = false 
    } 
}) 

を働いた方法。私はShubhamの答えは使用を中止し、コードを移行する必要がある人々の反応によって提案された回避策だと思い

Answer 4

] =それは

、君たちはこのための任意の失敗したテストケースを知っている場合は私に知らせてください役に立てば幸いisMountedアンチパターン。

これは必ずしも悪いわけではありませんが、この問題の実際の解決策をリストする価値があります。

The article linked by Shubhamには、このアンチパターンを回避するための2つの提案があります。必要なコンポーネントは、コンポーネントがアンマウントされたときにsetStateを呼び出す理由によって異なります。

あなたのコンポーネントにフラックスストアを使用している場合、あなたはES6の約束を使用する場合は、あなたが作るためにあなたの約束をラップする必要があるかもしれませんcomponentWillUnmount

class MyComponent extends React.Component { 
    componentDidMount() { 
    mydatastore.subscribe(this); 
    } 
    render() { 
    ... 
    } 
    componentWillUnmount() { 
    mydatastore.unsubscribe(this); 
    } 
} 

に解除しなければなりませんそれはキャンセル可能です。

const cancelablePromise = makeCancelable(
    new Promise(r => component.setState({...}})) 
); 

cancelablePromise 
    .promise 
    .then(() => console.log('resolved')) 
    .catch((reason) => console.log('isCanceled', reason.isCanceled)); 

cancelablePromise.cancel(); // Cancel the promise 

リンク先の記事でmakeCancelableについては、こちらをご覧ください。

結論として、変数を設定し、コンポーネントがマウントされているかどうかを確認してこの問題を修正しないでください。問題の根本に移動します。あなたが何かを考え出すことができる場合は、他の一般的なケースでコメントしてください。