import { signIn, signOut, useSession } from "next-auth/client"; import Link from "next/link"; import { apiUrlPart } from "../config"; import { useContext } from "react"; import { StateContext } from "../context/StateContext"; export default function Navigation() { const [session] = useSession(); const { userId, setUserId } = useContext(StateContext); const getUserData = async () => { const apiRes = await fetch(`${apiUrlPart}/api/social/login/user/`, { method: "GET", headers: { Authorization: `JWT ${session.accessToken}`, }, }); const data = await apiRes.json(); console.log(data.user); setUserId(data.user.id); }; const logoutHandler = async () => { signOut(); // 実行される setUserId(""); // 実行される }; const loginHandler = async () => { signIn(); // 実行される getUserData; // 実行されない }; return ( <header className="container flex flex-row items-center mx-auto px-5 py-14 max-w-screen-lg"> <Link href="/"> <a className="text-4xl font-bold text-white">SNS</a> </Link> <nav className="ml-auto"> {session && session.accessToken ? ( <> {/* 随時、取得したユーザー情報のIdを表示 */} userId: {userId} <Link href="/"> <div className="inline-block bg-indigo-500 mr-8 hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"> ホーム </div> </Link> <Link href="/profile"> <div className="inline-block bg-indigo-500 mr-8 hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer" onClick={getUserData} > ユーザー情報取得 </div> </Link> <div className="inline-block bg-indigo-500 mr-8 hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer" onClick={logoutHandler} > ログアウト </div> </> ) : ( <> <Link href="/"> <div className="inline-block bg-indigo-500 mr-8 hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"> ホーム </div> </Link> <div className="inline-block bg-indigo-500 mr-8 hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer" // Googleログイン用の関数のみを実行 // onClick={() => signIn()} // Googleログイン用の関数とユーザー取得用の関数を実行 onClick={loginHandler} > ログイン </div> </> )} </nav> </header> ); }
「Navigation.js」ファイルにて、ログインボタンをクリックした際に、「loginHandler」関数を実行する。「loginHandler」関数では、 「signIn()」関数、「getUserData」関数を、順次、実行する。 非同期の関数を二つ並べるのは無理なのでしょうか? ご教授お願いしたいです。
Reduxは使わず、React HooksのuseContext()を使って、状態管理を行っています。