コンポーネント内でのconsole表示について
Q&A
Closed
解決したいこと
コンポーネント内の動きを見るためにconsole.logを使ってデバッグしたい。
状態によって表示、非表示とする動きをつかみたい。
現在react、railsを使って、認証機能について学習しています。
ルートにアクセスしたときに、Cookiesの情報を参照してrailsにログインユーザーがいないか問い合わせを行い、いればホームページへ、いなければルートからサインインページに飛ばせるような機能を目指しています。
いくつかの記事を参考にして以下のようにコードを記載しました。
App.js
import { createContext, useEffect, useState } from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { getCurrentUser } from "./api/auth";
import { Home } from "./components/Home";
import { SignIn } from "./components/SignIn";
import { SignUp } from "./components/SignUp";
export const AuthContext = createContext();
function App() {
const [loading, setLoading] = useState(true);
const [isSignedIn, setIsSignedIn] = useState(false);
const [currentUser, setCurrentUser] = useState();
// Cookie情報からログイン中ユーザーを取得、結果をハンドリング、最後にloadingをfalseに
const handleGetCurrentUser = async () => {
try {
console.log("useEffectから呼ばれてgetCurrentUserします。");
const res = await getCurrentUser();
console.log(res);
// res ? res.data.isLogin : undefined の省略
if (res?.data.isLogin === true) {
setIsSignedIn(true);
setCurrentUser(res?.data.currentUser);
console.log(res?.data.currentUser);
} else {
console.log("no current user");
}
} catch (e) {
console.log(e);
}
setLoading(false);
};
//初回レンダリング、currentUserの変更時にユーザーを取得しにいく。
useEffect(() => {
console.log("useEffect実行");
handleGetCurrentUser();
}, [currentUser]);
// loadingがfalseの時かつ、ログインユーザーが有効（isSignIn(true)）のときにchildrenを表示。
// ログイン中ユーザーがいなかったらサインインに飛ばす。
console.log("privateの上の行です。");
const Private = ({ children }) => {
console.log("privateの中です。");
if (!loading) {
if (isSignedIn) {
return children;
} else {
return <Redirect to="signin" />;
}
} else {
return <></>;
}
};
console.log("privateの下の行です。");
return (
<AuthContext.Provider
value={{
loading,
setLoading,
isSignedIn,
setIsSignedIn,
currentUser,
setCurrentUser,
}}
>
<BrowserRouter>
<Switch>
<Route exact path="/signup">
<SignUp />
</Route>
<Route exact path="/signin">
<SignIn />
</Route>
<Private>
<Route exact path="/">
<Home />
</Route>
</Private>
</Switch>
</BrowserRouter>
</AuthContext.Provider>
);
}
export default App;
auth.js
export const getCurrentUser = () => {
if (
!Cookies.get("_access_token") ||
!Cookies.get("_client") ||
!Cookies.get("_uid")
)
return console.log("ログイン中のユーザーはいません。");
console.log("クッキーにデータがあることが確認できました。これを元にログイン情報がないかをrails側に問い合わせます。");
return (
client.get("/auth/sessions", {
headers: {
"access-token": Cookies.get("_access_token"),
client: Cookies.get("_client"),
uid: Cookies.get("_uid"),
},
})
)
};
今回質問したい内容としては、
1、App.jsに記載したPrivateの中のconsole.logはなぜ表示されないのか？
2、Private内で分岐の条件としてloadingの真偽を使用しているが、初回のレンダリングでuseEffectが動くことにより、どの条件でもfalseとなるため、なぜこれが必要なのか？なぜelseで<>< />を返すのか？
です。
初歩的かつ、読みづらいコードかとは思いますが、ご教授いただけたら幸いです。
0
