Reactの処理がコンポーネント化されない

前提

現在ポートフォリオサイトを作成しています。
https://github.com/takoyan33/manga-kousatu.net
https://mangakousatunet.vercel.app/

実現したいこと

現在ポートフォリオで作成していおり、
登録処理をコンポーネント化したいと考えています。
https://mangakousatunet.vercel.app/register
登録処理はFirebase authcationを利用しています。

発生している問題・エラーメッセージ

ですが、ファイルを２つに分けて、signup.jsを作り、コンポーネント化しようとしたのですが、
上手くコンポーネント化されずに、クリックしても反応がない状態です。
関数を他ファイルに書くのが初めてなので、どこがおかしいか分からない状態です。
分かる方がいればよろしくお願いします。

JavaScript
1#register.js
2import { app } from "../firebaseConfig";
3import {
4  getAuth,
5  createUserWithEmailAndPassword,
6  GoogleAuthProvider,
7  signInWithPopup,
8} from "firebase/auth";
9import { useState, useEffect } from "react";
10import { useRouter } from "next/router";
11import { MuiNavbar } from "../layouts/components/MuiNavbar";
12import Button from "@mui/material/Button";
13import Box from "@mui/material/Box";
14import TextField from "@mui/material/TextField";
15import Head from "next/head";
16import Link from "next/link";
17 import SignUp from "./api/auth/signup";
18
19export default function Register() {
20  const auth = getAuth();
21  const router = useRouter();
22  const googleProvider = new GoogleAuthProvider();
23  const [email, setEmail] = useState("");
24  const [password, setPassword] = useState("");
25
26
27  const SignUpWithGoogle = () => {
28    signInWithPopup(auth, googleProvider).then((response: any) => {
29      console.log(response.user);
30      sessionStorage.setItem("Token", response.user.accessToken);
31      router.push("/home");
32    });
33  };
34
35  return (
36    <div>
37      <Head>
38        <title>漫画考察.net/新規登録</title>
39        <meta name="description" content="Generated by create next app" />
40        <link rel="icon" href="/favicon.ico" />
41      </Head>
42
43      <MuiNavbar />
44      <div className="max-w-7xl m-auto">
45        <h2 className="m-5 my-12 text-center text-2xl font-semibold">
46          新規登録
47        </h2>
48
49        <Box
50          component="form"
51          className="flex justify-center max-w-7xl "
52          noValidate
53          autoComplete="off"
54        >
55          <div>
56            <label className="text-center my-4">メールアドレス*</label>
57            <br></br>
58            <TextField
59              id="outlined-basic"
60              label="sample@gmail.com"
61              className="m-auto w-80"
62              variant="outlined"
63              onChange={(event) => setEmail(event.target.value)}
64            />
65            <br></br>
66            <br></br>
67
68            <label className="text-center my-4">パスワード（8文字以上)*</label>
69            <br></br>
70            <TextField
71              id="outlined-basic"
72              label="Password"
73              type="password"
74              variant="outlined"
75              className="m-auto w-80"
76              onChange={(event) => setPassword(event.target.value)}
77            />
78            <br></br>
79            <br></br>
80
81            <label className="text-center my-4">
82              確認用パスワード（8文字以上)*
83            </label>
84            <br></br>
85            <TextField
86              id="outlined-basic"
87              label="Password"
88              type="password"
89              variant="outlined"
90              className="m-auto w-80"
91              onChange={(event) => setPassword(event.target.value)}
92            />
93            <br></br>
94            <br></br>
95            <Button
96              variant="outlined"
97              onClick={SignUp}
98              className="m-auto w-80 my-8"
99            >
100              新規登録
101            </Button>
102            <br></br>
103            <br></br>
104            <Button
105              variant="outlined"
106              onClick={SignUpWithGoogle}
107              className="m-auto w-80 "
108            >
109              Googleで新規登録
110            </Button>
111            <br></br>
112            <br></br>
113            <Button variant="outlined" className="m-auto w-80 my-8">
114              <Link href="/login">ログインはこちら</Link>
115            </Button>
116          </div>
117        </Box>
118      </div>
119    </div>
120  );
121}
122
123

#signup.js

import { app } from "../../../firebaseConfig";
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { useState } from "react";
import { useRouter } from "next/router";
import React from "react";

export const SignUp = () => {
  const auth = getAuth();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  createUserWithEmailAndPassword(auth, email, password)
    .then((response) => {
      sessionStorage.setItem("Token", response.user.accessToken);
      console.log(response.user.accessToken);
      router.push("/home");
    })
    .catch((err) => {
      alert("emailが既にあります");
    });

  return SignUp;
};

成功している処理

#register.js
import { app } from "../firebaseConfig";
import {
  getAuth,
  createUserWithEmailAndPassword,
  GoogleAuthProvider,
  signInWithPopup,
} from "firebase/auth";
import { useState, useEffect } from "react";
import { useRouter } from "next/router";
import { MuiNavbar } from "../layouts/components/MuiNavbar";
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Head from "next/head";
import Link from "next/link";

export default function Register() {
  const auth = getAuth();
  const router = useRouter();
  const googleProvider = new GoogleAuthProvider();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const SignUp = () => {
    let checkSaveFlg = window.confirm("この内容で登録しても大丈夫ですか？");

    if (checkSaveFlg) {
      createUserWithEmailAndPassword(auth, email, password)
        .then((response: any) => {
          sessionStorage.setItem("Token", response.user.accessToken);
          console.log(response.user.accessToken);
          router.push("/home");
        })
        .catch((err) => {
          alert("emailが既にあります");
        });
    } else {
    }
  };
  const SignUpWithGoogle = () => {
    signInWithPopup(auth, googleProvider).then((response: any) => {
      console.log(response.user);
      sessionStorage.setItem("Token", response.user.accessToken);
      router.push("/home");
    });
  };

  return (
    <div>
      <Head>
        <title>漫画考察.net/新規登録</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <MuiNavbar />
      <div className="max-w-7xl m-auto">
        <h2 className="m-5 my-12 text-center text-2xl font-semibold">
          新規登録
        </h2>

        <Box
          component="form"
          className="flex justify-center max-w-7xl "
          noValidate
          autoComplete="off"
        >
          <div>
            <label className="text-center my-4">メールアドレス*</label>
            <br></br>
            <TextField
              id="outlined-basic"
              label="sample@gmail.com"
              className="m-auto w-80"
              variant="outlined"
              onChange={(event) => setEmail(event.target.value)}
            />
            <br></br>
            <br></br>

            <label className="text-center my-4">パスワード（8文字以上)*</label>
            <br></br>
            <TextField
              id="outlined-basic"
              label="Password"
              type="password"
              variant="outlined"
              className="m-auto w-80"
              onChange={(event) => setPassword(event.target.value)}
            />
            <br></br>
            <br></br>

            <label className="text-center my-4">
              確認用パスワード（8文字以上)*
            </label>
            <br></br>
            <TextField
              id="outlined-basic"
              label="Password"
              type="password"
              variant="outlined"
              className="m-auto w-80"
              onChange={(event) => setPassword(event.target.value)}
            />
            <br></br>
            <br></br>
            <Button
              variant="outlined"
              onClick={SignUp}
              className="m-auto w-80 my-8"
            >
              新規登録
            </Button>
            <br></br>
            <br></br>
            <Button
              variant="outlined"
              onClick={SignUpWithGoogle}
              className="m-auto w-80 "
            >
              Googleで新規登録
            </Button>
            <br></br>
            <br></br>
            <Button variant="outlined" className="m-auto w-80 my-8">
              <Link href="/login">ログインはこちら</Link>
            </Button>
          </div>
        </Box>
      </div>
    </div>
  );
}

hoshi-takanori

2022/07/24 01:14

SignUp は React のコンポーネントになってない (する必要もないけど) のに、useState などのコンポーネントでしか使えないものを使ってるからでしょうね…。

行動規範の内容に同意します

回答1件

JavaScript
1<Button
2  variant="outlined"
3  onClick={SignUp}
4  className="m-auto w-80 my-8"
5>

このボタンを押下した際にSignUpを起動させたい、ということでしょうか？
もしそうでしたら、SignUpをuseCallbackにしておく必要があります。

TypeScript
1#signup.js
2
3import { app } from "../../../firebaseConfig";
4import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
5import { useState } from "react";
6import { useRouter } from "next/router";
7import React from "react";
8import { useCallback } from "react";
9
10export const useSignUp = () => {
11  const auth = getAuth();
12  const router = useRouter();
13  const [email, setEmail] = useState("");
14  const [password, setPassword] = useState("");
15
16  const signUp = useCallback(() => {
17    createUserWithEmailAndPassword(auth, email, password)
18      .then((response) => {
19        sessionStorage.setItem("Token", response.user.accessToken);
20        console.log(response.user.accessToken);
21        router.push("/home");
22      })
23      .catch((err) => {
24        alert("emailが既にあります");
25      });
26  }, [])
27
28  return { signUp };
29};

JavaScript
1#register.js
2
3......
4
5export default function Register() {
6  const auth = getAuth();
7  const router = useRouter();
8  const googleProvider = new GoogleAuthProvider();
9  const [email, setEmail] = useState("");
10  const [password, setPassword] = useState("");
11  const {signUp} = useSignUp;
12
13......
14
15<Button
16  variant="outlined"
17  onClick={signUp}
18  className="m-auto w-80 my-8"
19>
20
21......