Reacrルータ - SETSTATE（...）：専用でマウントや実装部品

Question

を更新することができ、私はルータに反応使っているアプリを持っています。このアプリには常に更新されるいくつかのコンポーネントがあります（ライブアナリティクスデータのダッシュボードです）。

warning.js：36警告：SETSTATE（...）：専用でマウントまたは 実装部品を更新することができ、ダッシュボードのさまざまなセクションの周りにリンクする<Link>を使用したとき、私は次のようなエラーに実行していますよ。これは、通常、アンマウントされたコンポーネント でsetState（）を呼び出したことを意味します。これはノーオペレーションです。 ログインコンポーネントのコードを確認してください。ここで

私のコードです：

App.js：

<BrowserRouter> 
    <Main />  
</BrowserRouter> 

Main.js：

<Sidenav /> 
<Switch> 
    <Route exact path='/site-feedback' component={Sitefeedback}/> 
    <Route exact path='/logins' component={Logins}/> 
    <Route exact path='/shop-sales' component={Shopsales}/> 
</Switch> 

Sidenav.js：

<Link to='/site-feedback'>Site Feedback</Link> 
<Link to="/logins">Logins</Link> 
<Link to="/shop-sales">Shop Sales</Link> 

私はタグ普通で<links>を交換した場合、問題が再びアプリ全体の負荷と消えるが、私は理想的に例えばヘッダやsidenavのような私がそこに持っている他のコンポーネントを再ロードする必要はありませんしたいと思います。

誰もがこのために良い回避策を知っていますか？あなたのコンポーネントの一つが間隔を設定したり、外部イベントをサブスクライブすることを私は

Answer 1

チャンスが優れている...私はルータに反応して、この問題を経験した唯一の人間だと想像

感謝することはできません。あなたはすべてのイベントから退会し、componentWillUnmountにすべてのタイムアウト/インターバルをクリアする必要があり、それは次のようになります。

class SomeComponent extends Component { 
    componentDidMount() { 
    this.timeoutId = setInterval(...) 
    subscribeToSomeEvent(...) 
    } 
    componentWillUnmount() { 
    clearInterval(this.timeoutId) 
    unsubscribeFromSomeEvent(...) 
    } 
} 

あなたは、そのメッセージは、ユーザーがページを変更したときである（したがって、得ることができますもう一つの理由いくつかのAJAXリクエストが進行中であり、要求が完了すると、それがアンマウントコンポーネントを更新しようとしながら）電流成分をアンマウント。あなたは、これらの後半の更新を避けるために、いくつかのフラグを設定することができます。

class SomeComponent extends Component { 
    componentDidMount() { 
    fetch(...).then(data => { 
     if (this.unmounted) return 
     // process the data 
    }) 
    } 
    componentWillUnmount() { 
    this.unmounted = true 
    } 
}