Open1

「AWS Amplify STDIOで始めるフロントエンド開発」の実践で躓いたところ

hajimehajime

p86 サインアウトの設定

問題が起きた箇所

        <a
          className='App-link'
          onClick={Auth.signOut}
          href='.'
        >
          this is signOut link
        </a>

動作したコード

(importは省略)

Amplify.configure(aws_exports);

function App() {

  const handlerSignOut = async() =>{
    try {
      await Auth.signOut();
    } catch (error) {
　　// エラーハンドリングは割愛
      console.log("signOutError");
      console.log(error);

    }
  }


  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h2>
        <button
          className='App-link'
          onClick={handlerSignOut}
        >
          this is signOut link
        </button>
        </h2>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

動かなかった理由の推測と実行結果

  • aタグの遷移が先に行われてサインアウト処理が走らなかったのではないか？
    • signOut()はPromiseを返す非同期関数である
    • 遷移しないbutton要素にしてしまえば手っ取り早く検証できそう
      • 動いたのでとりあえず先に進む