firebaseの記事
のupdateProfileを使って、登録したnameを更新したいと考えています。
ですが、下記のエラーが出てしまいます。
Unhandled Runtime Error
TypeError: Cannot destructure property 'displayName' of 'undefined' as it is undefined.
Call Stack
updateProfile
node_modules/@firebase/auth/dist/esm2017/index-58473f72.js (5433:37)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
invokeGuardedCallbackAndCatchFirstError
node_modules/react-dom/cjs/react-dom.development.js (4291:0)
executeDispatch
node_modules/react-dom/cjs/react-dom.development.js (9041:0)
processDispatchQueueItemsInOrder
node_modules/react-dom/cjs/react-dom.development.js (9073:0)
processDispatchQueue
node_modules/react-dom/cjs/react-dom.development.js (9086:0)
dispatchEventsForPlugins
node_modules/react-dom/cjs/react-dom.development.js (9097:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (9288:0)
batchedUpdates$1
node_modules/react-dom/cjs/react-dom.development.js (26140:0)
batchedUpdates
node_modules/react-dom/cjs/react-dom.development.js (3991:0)
dispatchEventForPluginEventSystem
node_modules/react-dom/cjs/react-dom.development.js (9287:0)
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
node_modules/react-dom/cjs/react-dom.development.js (6465:0)
dispatchEvent
node_modules/react-dom/cjs/react-dom.development.js (6457:0)
dispatchDiscreteEvent
node_modules/react-dom/cjs/react-dom.development.js (6430:0)
と出てしまいます。userの情報は取得できており、
ユーザー写真やemailや名前は表示できているのですが、なぜか更新もできません。
入力欄は、値が一応受け取っている動きをしているので、
updateProfile(user, {の書き方が悪い感じでしょうか。
よろしくお願いします。
profile.js
import React from "react";
import { useEffect, useState } from "react";
import Link from "next/link";
import { app, database } from "../../firebaseConfig";
import {
collection,
addDoc,
getDocs,
doc,
updateDoc,
deleteDoc,
Firestore,
} from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth, updateProfile } from "firebase/auth";
import { MuiNavbar } from "../../layouts/MuiNavbar";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import CardMedia from "@mui/material/CardMedia";
import Typography from "@mui/material/Typography";
import Grid from "@material-ui/core/Grid";
import Head from "next/head";
export default function Profile() {
const [ID, setID] = useState(null);
const [title, setTitle] = useState("");
const [context, setContext] = useState("");
const auth = getAuth();
const user = auth.currentUser;
const [photoURL, setPhotoURL] = useState();
const [displayName, setDisplayName] = useState(user?.displayName);
const [image, setImage] = useState();
let router = useRouter();
const databaseRef = collection(database, "CRUD DATA");
const [firedata, setFiredata] = useState([]);
console.log(user);
console.log(displayName);
if (user) {
updateProfile(user, {
displayName: displayName,
})
.then(() => {
setDisplayName("");
// setPhotoURL("");
router.push("/profile");
})
.catch((error) => {
console.error(error);
});
}
return (
<div>
<Head>
<title>漫画考察.net</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<MuiNavbar />
<h2 className="m-5">プロフィール</h2>
<p className="m-5">
ユーザー画像: {user && <img src={user.photoURL} />}
</p>
<p className="m-5">名前: {user && <span>{user.displayName}</span>}</p>
<p className="m-5">自己紹介:</p>
<p className="m-5">
メールアドレス: {user && <span>{user.email}</span>}
</p>
<p className="m-5">過去の投稿</p>
<p className="m-5">いいねした投稿:</p>
<Box
component="form"
sx={{
"& > :not(style)": { m: 1, width: "25ch" },
}}
noValidate
autoComplete="off"
>
<TextField
id="outlined-basic"
label="名前"
variant="outlined"
value={displayName || ""}
onChange={(event) => setDisplayName(event.target.value)}
/>
</Box>
<Button variant="outlined" className="m-5" onClick={updateProfile}>
更新する
</Button>
<Button variant="outlined" className="m-5" href="">
<Link href="/profile/edit">更新</Link>
</Button>
<Button variant="outlined" className="m-5" href="/profile/edit">
メールアドレスを変更する
</Button>
<Button variant="outlined" className="m-5" href="/profile/edit">
パスワードを変更する
</Button>
</div>
);
}