目次
出たエラー
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)