Reactのasync awaitが上手く動作しない。

Question

前提・実現したいこと

React-Redux,Redux-Sagaでシステムを作っています。

ボタンを押したらSaga.jsでAPIを叩いて、
その値をレスポンスを待って次の画面へ遷移したいのですが、
レスポンスを待たずに遷移してしまいます。

async awaitの考え方自体が間違っているのでしょうか？

該当のソースコード

  handleClick = async () => {
      await this.props.requestFetch(this.state.id, this.state.result); // ここがAPIを叩いている部分
      this.setState(({ errorCheck: this.props.isError }),
        () => this.props.isError === false && this.props.history.push('/menu'));
  }

APIを叩いたレスポンスをstoreに格納するようにしています。
this.props.isErrorは、
APIを叩いてfailedだった場合にtrueになります。

これで遷移しないと思ったのですが、
遷移してしまします。

コードのawait以下でconsole.log(this.props.isError)は、
falseです。


ご助力いただけますと幸いです。

Comments

[maisumakun]

handleClickを仕掛けたエレメントは、どのようなものでしょうか？

[takada.m]

```
<div className="entry-button" style={styles.entryButton} onClick={this.handleClick} role="presentation">
<p>登録</p>
</div>

上記のような形です。
ご質問の答えになっておりますでしょうか？

[maisumakun]

えっと、いままでに提示された情報では「遷移する」先も、その挙動を示すコードも何もありません。

<div>の外側に<a>があって、そちらが反応している…ようなことはないですか？

[takada.m]

aタグは一切使っておりません。
{ withRouter }をインポートして、
this.props.history.push('/menu')のところで遷移させています！

Answer 1

() => isError === false && this.props.history.push('/menu')); の行の isError を this.props.isError にしても同じ結果でしょうか？

Comments

[takada.m]

その場合でも同様でした????