私のリアクションアプリで経路が変更されたときclearInterval（）とアプリが途切れる

Question

私はで働いています。リアクタールータ-domで反応しています。

私はいくつかの反応ルータDOMのメニューを持っています<NavLink />、それぞれ別のルートに私を連れて行く。 this.chartChangeId = setInterval(()=> this.setState(data), 1500)：私のメインルートpath="/"で

は、私はこのように、ランダムデータで変更を続けているチャートでchartComponentを持っています。

私はこれを追加する前に：

componentWillUnmount(){ 
    clearInterval(this.chartChangeId); 
} 

chartComponentに私のアプリは壊れませんでしたが、私はこのエラーを得た：

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the BrainWaveChart component.

ので、私はライフサイクルにこれを追加します。

Uncaught TypeError: timeout.close is not a function at exports.clearTimeout.exports.clearInterval (main.js:14) at BrainWaveChart.componentWillUnmount (brainwaveChart.jsx:116) at callComponentWillUnmountWithTimer (vendor_f02cab182c1842c98837.js:45235) at HTMLUnknownElement.callCallback (vendor_f02cab182c1842c98837.js:37015) at Object.invokeGuardedCallbackDev (vendor_f02cab182c1842c98837.js:37054) at invokeGuardedCallback (vendor_f02cab182c1842c98837.js:36911) at safelyCallComponentWillUnmount (vendor_f02cab182c1842c98837.js:45242) at commitUnmount (vendor_f02cab182c1842c98837.js:45368) at commitNestedUnmounts (vendor_f02cab182c1842c98837.js:45404) at unmountHostComponents (vendor_f02cab182c1842c98837.js:45687)

私はそれが間違ってやっている：私は別のルート私のアプリの休憩に行くために<NavLink />のいずれかをクリックして、私はこのエラーを取得する

しかし、今、？

Answer 1

()=> this.setState(data)は、すでにメモリ内にあるため、またその非同期スタック内にあるため、間隔をクリアしても実行されます。必要なのは、コンポーネントが存在するかどうかを確認してから、更新状態だけを確認することです。一番簡単なことは何ですか？

const {clearInterval, setInterval} = window; 
class Comp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.mounted = false; 
    this.interval = setInterval(() => { 
     if(this.mounted) this.setState(); 
    }) 
    } 
    componentWillMount() { 
    this.mounted = true; 
    } 
    componentWillUnmount() { 
    this.mounted = false; 
    clearInterval(this.interval); 
    } 
} 

しかし、これは嫌悪感です。適切な方法は、AjaxでsetStateを使用しないことです。 https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html

Answer 2

あなたのIDEはおそらく{ clearInterval }を自動的にインポートしました。
これが問題の原因です。
ファイルにimport { clearInterval } from ....の文があるかどうか確認してください。
を削除してください。
それはいくつかのIDEで起こります。
このリンクには、さらに詳しい情報があります。
https://github.com/angular/angular/issues/12400