React state update on an unmounted componentというエラーが出た時のメモ

出たエラー

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)

​x
 
this.props.history.push(URL)

↑のコードでURLを変更して次の画面に行くはずが、↓のコードでURLを変更していたのが原因だったみたいです。

window.history.pushState('','',URL)

xxxxxxxxxx
 
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});
        }
      }
    }
  )
}

xxxxxxxxxx
 
//モーダルをモーダル外をクリックしても閉じる
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; // これを足した
//
// 省略
//
}

xxxxxxxxxx
 
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);
         }
     }
   })
}

xxxxxxxxxx
 
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);
         }
     }
   })
}