reactjs - ReactJS: ダイアログを開くと、「マウントされていないコンポーネントで React 状態の更新を実行できません」

Question

別のクラス コンポーネントからダイアログを開くと、次のエラーが表示されました。 componentWillUnmount メソッドの非同期タスク"

index.js

import ...

class AdMenu extends Component {
    componentWillMount = () => {
        this.onSearch();
    };

    onOpenInsert = () => {
        showDetailDialog();
    };

    onSearch = () => {
        fetch(_url, ...)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw response;
                }
            })
            .then(responseJson => {
                this.setState({...});
            })
            .catch(response => {...});
    };

    render() {
        return (
            <div>
                <DetailDialog />
                <Button color="primary" onClick={this.onOpenInsert}>Add New</Button>
                <BootstrapTable .... />
            </div>
        );
    }
}

export default withTranslation()(AdMenu);

詳細ダイアログ.js

export var showDetailDialog = function () {
    this.setState({open: true});
    console.log('Mounted: ' + this.mounted);
};

class DetailDialog extends React.Component {
    mounted = false;
    controller = new AbortController();
    constructor(props) {
        super(props);
        this.state = {open: false};
        showDetailDialog = showDetailDialog.bind(this);
    }
    componentDidMount() {
        console.log('componentDidMount');
        this.mounted = true;
    }

    componentWillUnmount(){
        console.log('componentWillUnmount');
        this.mounted = false;
    }
    onClose = () => {
        this.setState({open: false});
    };

    render() {
        return (
            <Modal isOpen={this.state.open} toggle={this.onClose} className={"modal-primary"} >
                <ModalHeader toggle={this.onClose}>Detail</ModalHeader>
                <ModalBody>
                    ...
                </ModalBody>
            </Modal>
        );
    }
}

export default withTranslation()(DetailDialog);

DetailDialog エクスポート クラス コンポーネントと関数 showDetailDialog があります。index.js ページにインポートしました。

初めてページを開いてダイアログを開くをクリックすると、正常に動作します。しかし、メニューの Router で別のページに切り替えて、2 回目に別のページを開くと、コンソール ログにエラーが表示されました。

this.mounted var を使用して、アンマウントされたコンポーネントを確認しようとしましたが、2回目以降にコンポーネントがアンマウントされたときに詳細ダイアログを開くように状態を設定する方法がわかりません。

controller = new AbortController(); を使用してみました。componentWillUnmount() の controller.abort() が機能していません。

または、この問題の解決策はありますか?

ありがとう！

画像: https://prnt.sc/nsp251

コンソール ログのエラー イメージ

CodeSandbox のソース: https://codesandbox.io/s/coreuicoreuifreereactadmintemplate-5unwj

ステップテスト:

• 広告メニューをクリック（1st）

• 広告グループをクリック

• 広告メニューをクリック (2 番目)

• 広告メニューの [ダイアログを開く] をクリックします

• コンソール ログ ブラウザの表示

ファイル: src/views/category

ノード v11.12.0

Npm 6.7.0

ウィンドウ 10