目次
出たエラー
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
何していたか
react-router-dom
のreact-router
のwithRouter
を使って、this.props.history.push(URL)
で画面遷移しようとしたら起こった。
解決策
this.props.history.push(URL)
↑のコードでURLを変更して次の画面に行くはずが、↓のコードでURLを変更していたのが原因だったみたいです。
window.history.pushState('','',URL)
↑これは、stateってやつを更新しちゃうので良くなかったみたい。
参考にしたサイト
ReactでCan’t perform a React state update on an unmounted component.の原因と解決
React Can’t perform a React state update on an unmounted component. が出た時に確認すること
と思ったらまた出た…
//モーダルをモーダル外をクリックしても閉じる LinkShareClose2(){ window.addEventListener('click', (e) => { if(!e.target.closest('.modal')) { if(!e.target.closest('.btn_square')) { //ここに外側をクリックしたときの処理 this.setState({iscopyToClipboard: false}); } } } ) }
この関数が実行されているとエラーになるみたい。
修正してみました↓。
constructor(props) { super(props); this.mounted = false; // これを足した // // 省略 // }
LinkShareClose2(){ const TTK = window.addEventListener('click', (e) => { if(!e.target.closest('.modal')) { if(!e.target.closest('.btn_square')) { //ここに外側をクリックしたときの処理 this.mounted && this.setState({isLinkShareOpen: false}) this.mounted && this.setState({iscopyToClipboard: false}); window.removeEventListener('click',TTK); } } }) }
ちょっと分かり難いですが、、、。constructor
にthis.mounted = false;
を足して、this.mounted && this.setState(//ほにゃらら)
としています。removeEventListener
も追加しています。
参考にしたサイト
React コンポーネントのアンマウント時のエラーを修正する方法(componentWillUnmount)