【react】時間のかかる非同期処理の前でsetStateは非推奨

ダイアログを閉じた直後にクラッシュする不具合に遭遇。

TypeError: Cannot read property ‘hide’ of null

hideって何が隠れているのか分からないしそんなDOM作った覚えないしで

手詰まりだったのですが

同じ構成だった別ファイルのソースコードと見比べてみると

tryの前でsetStateをしていたのが発覚。ここで重い処理をしていたらもしかしてと思い

外してみるとまさにビンゴでした。

reactはページ移動の際にデフォルトでダイアログが閉じるようになっているようで

try/catchの寸前でthis.state({isDialog: !this.state.isDialog})を追加、つまり

二重にsetStateしてしまい、ダイアログを閉じようとしたstateは既に遷移した後に行われるので

ダイアログ(DOM)は存在せず

nullになってしまうというからくりでした。

処理に時間がかかる非同期処理の寸前でsetStateをしないだけでこのような事故を

回避することができます。