【javascript】ダイアログ操作中にDOMを作ろうとするとThe node before which the new node is to be inserted is not a child of this node.エラーが返る

おなじみのreactアプリ開発で、ダイアログのボタンを押してエラーになった場合に

エラーメッセージを出す機能を作っていたのですが、ボタンを押した時に

エラーメッセージが出ずダイアログが閉じてしまう不具合が発生。

エラーメッセージは以下の通り。↓

DOMException: Failed to execute ‘insertBefore’ on ‘Node’:
The node before which the new node is to be inserted is not a child of this node.

これはコンポーネントから剥離された状態でDOMの生成はできないということ。

言い換えると、ダイアログを表示している間はコンポーネントの管理から外れるのでいかなるDOMも生成することが

できないということ。

今回自分がやろうとしたことはダイアログを出している間ボタンを押してエラー判定だった場合に

DOMが生成されてエラーメッセージが表示されるという仕組みでした。

まさに管理下から外れてDOMを作ろうとしたのでエラーになったという訳です。

という訳で、ダイアログなどでコンポーネントと離れた場所で何度もDOMを操作するのは避けましょう。