質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

Reactで名前保存と写真保存がうまくいかない

Shmupeiii
takoyan

総合スコア104

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

273閲覧

投稿2022/10/11 07:03

前提

現在ポートフォリオを作成しており、
Firebase authで登録したユーザー画像と名前を変更したいと考えています。
変更は下記URLで、写真と名前を同時に変更することはできるのですが、
名前だけ変更しようとエラーが出てしまいます。

URL
https://manga-kousatu-jsuvf4rdp-takoyan33.vercel.app/profile/edit/

id sample123@gmail.com
pass sample345!

github

https://github.com/takoyan33/manga-kousatu.net/tree/new-main

参考記事
https://masa-engineer-blog.com/next-js-firebase-file-upload/

実現したいこと

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

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name') at [Category]-9a3902376556eef9.js:1:1175 at l (main-6a3a6abc478270a2.js:1:95654) at Generator._invoke (main-6a3a6abc478270a2.js:1:95442) at P.forEach.e.<computed> [as next] (main-6a3a6abc478270a2.js:1:96077) at u ([Category]-9a3902376556eef9.js:1:624) at i ([Category]-9a3902376556eef9.js:1:827) at [Category]-9a3902376556eef9.js:1:886 at new Promise (<anonymous>) at [Category]-9a3902376556eef9.js:1:767 at [Category]-9a3902376556eef9.js:1:

イメージ説明

参考記事とほとんど同じ書き方をしているので、if文の条件を変えたりしているのですが、上手くいきません。
分かる方がいれば教えて頂きたいです。
よろしくお願いします。

JavaScript

1//Upload.jsx 2//if文でimageが""の場合の処理を書いているのですが、 3//const ext = image.name.split(".").pop(); のエラーが出てしまいます。 4 5import { app, database, storage } from "../../firebaseConfig"; 6import { ref, uploadBytes, getDownloadURL } from "firebase/storage"; 7 8//single image file upload 9export const postImage = async (image = null) => { 10 let uploadResult = ""; 11 12 if (image === "") { 13 return uploadResult; 14 } else { 15 const storageRef = ref(storage); 16 const ext = image.name.split(".").pop(); 17 const hashName = Math.random().toString(36).slice(-8); 18 const fullPath = "/images/" + hashName + "." + ext; 19 const uploadRef = ref(storageRef, fullPath); 20 21 // 'file' comes from the Blob or File API 22 await uploadBytes(uploadRef, image).then(async function (result) { 23 console.log(result); 24 console.log("Uploaded a blob or file!"); 25 26 await getDownloadURL(uploadRef).then(function (url) { 27 uploadResult = url; 28 console.log(uploadResult); 29 }); 30 }); 31 } 32 return uploadResult; 33}; 34

JavaScript

1//edit/index.tsx 2import React from "react"; 3import { useEffect, useState } from "react"; 4import Link from "next/link"; 5import { app, database } from "../../../firebaseConfig"; 6import { collection, getDocs } from "firebase/firestore"; 7import { useRouter } from "next/router"; 8import { getAuth, sendEmailVerification, updateProfile } from "firebase/auth"; 9import { MuiNavbar } from "../../../layouts/components/MuiNavbar"; 10import Button from "@mui/material/Button"; 11import Stack from "@mui/material/Stack"; 12import { postImage } from "../../api/upload"; 13import Box from "@mui/material/Box"; 14import TextField from "@mui/material/TextField"; 15import Head from "next/head"; 16import Image from "react-image-resizer"; 17 18export default function Edit() { 19 const [image, setImage] = useState<string>(); 20 const [result, setResult] = useState(""); 21 const [displayName, setDisplayName] = useState<string>(); 22 let router = useRouter(); 23 const databaseRef = collection(database, "CRUD DATA"); 24 const [createObjectURL, setCreateObjectURL] = useState<string>(null); 25 const [downloadURL, setDownloadURL] = useState<string>(null); 26 const auth = getAuth(); 27 const user = auth.currentUser; 28 29 const uploadToClient = (event) => { 30 if (event.target.files && event.target.files[0]) { 31 if (event == "") { 32 setImage(""); 33 setCreateObjectURL(""); 34 } else { 35 const file = event.target.files[0]; 36 setImage(file); 37 setCreateObjectURL(URL.createObjectURL(file)); 38 } 39 } else { 40 setImage(""); 41 setCreateObjectURL(""); 42 } 43 }; 44 45 const updatename = async () => { 46 if (image == "" || createObjectURL == "") { 47 updateProfile(auth.currentUser, { 48 photoURL: user.photoURL, 49 displayName: displayName, 50 }) 51 .then(() => { 52 alert("プロフィールを更新しました。"); 53 setResult(""); 54 setDisplayName(""); 55 router.push("/profile"); 56 }) 57 .catch((error) => { 58 console.log(error); 59 }); 60 } else { 61 const result = await postImage(image); 62 setResult(result); 63 updateProfile(auth.currentUser, { 64 photoURL: result, 65 displayName: displayName, 66 }) 67 .then(() => { 68 alert("プロフィールを更新しました。"); 69 setResult(""); 70 setDisplayName(""); 71 router.push("/profile"); 72 }) 73 .catch((error) => { 74 console.log(error); 75 }); 76 } 77 }; 78 79 return ( 80 <div> 81 <Head> 82 <title>漫画考察.net/プロフィール編集</title> 83 <meta name="description" content="Generated by create next app" /> 84 <link rel="icon" href="/favicon.ico" /> 85 </Head> 86 <MuiNavbar /> 87 88 <h2 className="my-12 text-center text-2xl font-semibold"> 89 プロフィール画像の編集 90 </h2> 91 92 <p className="my-12 text-center font-semib"> 93 現在のユーザー画像 94 {user && ( 95 <p className="text-center m-auto"> 96 <Image 97 className="m-auto text-center max-w-sm" 98 height={100} 99 width={100} 100 src={user.photoURL} 101 /> 102 </p> 103 )} 104 </p> 105 106 <Box 107 component="form" 108 sx={{ 109 "& > :not(style)": { m: 1, width: "25ch" }, 110 }} 111 noValidate 112 autoComplete="off" 113 > 114 <br></br> 115 <img 116 className="flex justify-center items-center m-auto w-full" 117 src={createObjectURL} 118 /> 119 <label 120 htmlFor="file-input" 121 className="bg-primary-900 text-white-900 dark:bg-dark-900 flex justify-center items-center px-4 py-2 rounded mb-6 w-full" 122 > 123 <svg 124 xmlns="http://www.w3.org/2000/svg" 125 className="h-10 w-10 hover:cursor-pointer hover:bg-gray-700" 126 fill="none" 127 viewBox="0 0 24 24" 128 stroke="currentColor" 129 strokeWidth="2" 130 > 131 <path 132 strokeLinecap="round" 133 strokeLinejoin="round" 134 d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" 135 /> 136 </svg> 137 </label> 138 <input 139 id="file-input" 140 className="hidden" 141 type="file" 142 accept="image/*" 143 name="myImage" 144 onChange={uploadToClient} 145 /> 146 147 <p>名前: {user && <span>{user.displayName}</span>}</p> 148 149 <TextField 150 id="outlined-basic" 151 label="名前" 152 variant="outlined" 153 onChange={(event: React.ChangeEvent<HTMLInputElement>) => 154 setDisplayName(event.target.value) 155 } 156 /> 157 <br></br> 158 </Box> 159 <br></br> 160 <Button variant="outlined" className="m-5" onClick={updatename}> 161 プロフィールを更新する 162 </Button> 163 <br></br> 164 </div> 165 ); 166} 167

補足情報(FW/ツールのバージョンなど)

"dependencies": {
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.9.3",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-brands-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@hookform/resolvers": "^2.9.7",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.0.0-rc.1",
"@mui/styled-engine-sc": "^5.0.0-rc.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"firebase": "^9.8.4",
"moment": "^2.29.4",
"next": "12.1.6",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-draft-wysiwyg": "^1.15.0",
"react-hook-form": "^7.34.2",
"react-image-resizer": "^1.3.0",
"react-spinners": "^0.13.4",
"react-tag-input": "^6.8.1",
"react-tag-input-component": "^1.1.1",
"styled-components": "^5.3.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@types/node": "^18.0.3",
"@types/react": "^18.0.15",
"autoprefixer": "^10.4.7",
"eslint": "8.18.0",
"eslint-config-next": "12.1.6",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.4",
"typescript": "^4.7.4

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

JavaScript

1> var image = "" 2< undefined 3> image === null 4< false

であるので、image が null である場合にも以下の場所でelseの側に行ってしまっており、nullはnameアトリビュートを持ってない、とエラーとなっていると考えられます。

JavaScript

1 if (image === "") { 2 return uploadResult; 3 } else { 4 const storageRef = ref(storage); 5以下略

このif文で、imageがnullである場合もはじいてやればよさそうです。

投稿2022/10/11 09:46

kazto

総合スコア7190

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

Shmupeiii

2022/10/14 13:14

分かりやすい回答ありがとうございました。 解決できました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。