【react】componentdidmount時にsetStateと非同期処理を同時に使うのを回避する

【現象】

ページ読み込み時にstateを含んだ非同期処理をすると

何も返ってこない。

</pre>
componentDidMount() {
try {
const result = (await sampleService.sampleAction(this.state.sampleWord)).data;
} catch {
}
}
<pre>

これはsetStateより非同期処理の方が処理が速いため、setStateをしている

間に置いていかれてしまうのが原因です。

ページが読み込まれる時はsetStateの絡んだ処理をやめる。

例えばreact-router-domの機能を使って以下のように追加する。

</pre>
this.props.history.push("/sample" ,state: { text: this.state.text })
<pre>

値を持たせて遷移をして、遷移先で非同期処理の際にsampleを渡す。※実証済み

遷移先で完結するなら良いのですがその先に複数ページが存在すると

次のページに移動してまた戻る時の値の後片付けが少しめんどくさい。その際は戻る時に一工夫

必要になります。

若しくはwindow.localstorage.setItem(‘sample’,text)で保存して渡す。

設定値としてずっと残したい場合はこちら。なお、データ量が5MBくらいなのでやや処理が重め。

どちらがいいかはアプリとの相性次第。