前提
現在ポートフォリオを作成しています。
この質問は複数サイトに投稿しています。
回答が得られた場合は、回答されてない投稿を削除します。
URL
https://manga-kousatu-net.vercel.app/
id sample123@gmail.com
pass sample345!
github
https://github.com/takoyan33/manga-kousatu.net/tree/new-main
実現したいこと
投稿の個別ページでリロードできるようにしたい
例:https://manga-kousatu-net.vercel.app/post/lmk3aFs36UmnwFIDxBlj/
現状だとエラーが出てしまいます。
getData();
usersData(); とすればリロードできるのですが、それだとfirestoreにデータをずっとアクセスし続けてしまうため、重くなってしまいます。
リロード時にエラーが出ないように表示するにはどうすれば良いでしょうか。
よろしくお願いします。
発生している問題・エラーメッセージ
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'indexOf')
Source
pages/post/[id].jsx (65:21) @ _callee$
63 | const getData = async () => {
64 | //firestoreからデータ取得
> 65 | const data = doc(database, "posts", id);
| ^
66 | console.log("Error getting document:", id);
67 | getDoc(data)
68 | .then((documentSnapshot) => {
Call Stack
eval
pages/post/[id].jsx (151:4)
Show collapsed frames
/post/[id].jsx
import系
const Post = () => {
const [ID, setID] = useState(null);
const [context, setContext] = useState("");
const [categori, setCategori] = useState("");
const [photoURL, setPhotoURL] = useState();
const [users, setUsers] = useState(null);
const [displayName, setDisplayName] = useState("");
const [createtime, setCreatetime] = useState("");
const [isUpdate, setIsUpdate] = useState(false);
const [posttitle, setPostTitle] = useState("");
const databaseRef = collection(database, "CRUD DATA");
//データベースを取得
const [firedata, setFiredata] = useState([]);
const [downloadURL, setDownloadURL] = useState(null);
const [likecount, setLikecount] = useState(0);
const usersRef = collection(database, "users");
const [userid, setUserid] = useState(null);
const [netabare, setNetabare] = useState("");
const [likes, setLikes] = useState(null);
const [selected, setSelected] = useState(["最終回"]);
let router = useRouter();
const { id } = router.query;
const auth = getAuth();
const user = auth.currentUser;
const getData = async () => {
//firestoreからデータ取得
const data = doc(database, "CRUD DATA", id);
getDoc(data).then((documentSnapshot) => {
setFiredata(documentSnapshot.data());
});
};
const getID = (
id,
title,
context,
downloadURL,
categori,
cratetime,
netabare,
photoURL,
userid,
likes,
selected
) => {
setID(id);
setContext(context);
setPostTitle(title);
setDownloadURL(downloadURL);
setIsUpdate(true);
setCategori(categori);
setCreatetime(cratetime);
setNetabare(netabare);
setPhotoURL(photoURL);
setUserid(userid);
setLikes(likes);
setSelected(selected);
console.log(title);
console.log(context);
};
const usersData = async () => {
//firestoreからデータ取得
await getDocs(usersRef).then((response) => {
//コレクションのドキュメントを取得
setUsers(
response.docs.map((data) => {
//配列なので、mapで展開する
return { ...data.data(), id: data.id };
//スプレッド構文で展開して、新しい配列を作成
})
);
});
};
useEffect(() => {
getData();
usersData();
}, [likes]);
const updatefields = () => {
更新処理
}
const deleteDocument = (id) => {
削除処理
};
const handleClick = (id, likes) => {
いいね処理
};
return (
<>
<SiteHead />
<MuiNavbar />
<div className="max-w-5xl m-auto">
<div>
<div>
<div className="lg:w-full my-4 ">
{user && (
<>
{user.email == firedata.email && (
更新ボタンと削除ボタン
)}
</>
)}
{isUpdate && (
更新フォーム
)}
<br></br>
<p>
<Link href="/">トップ</Link> > 投稿記事 >
{firedata.title}
</p>
<p className="flex justify-center my-6">
<Image
className="m-auto text-center max-w-sm"
height={500}
width={500}
src={firedata.downloadURL}
/>
</p>
<div>
<div className="text-2xl my-4">{firedata.title}</div>
<br></br>
<p>
<AccessTimeIcon /> 投稿日時:{firedata.createtime}
</p>
<br></br>
{firedata.edittime && (
<p>
<AccessTimeIcon />
編集日時:{firedata.edittime}
</p>
)}
<br></br>
{firedata.selected &&
firedata.selected.map((tag, i) => (
<span className="text-cyan-700" key={i}>
#{tag}
</span>
))}
<br></br>
<p className="text-left">{firedata.context}</p>
<br></br>
{firedata.contextimage && (
<p className="flex justify-center">
<Image
className="m-auto text-center max-w-sm"
height={500}
width={500}
src={firedata.contextimage}
/>
</p>
)}
<br></br>
<p>
<FavoriteIcon />
{firedata.likes}
</p>
<br></br>
{user && (
<SiteButton
href=""
text="いいねする"
className="inline my-2 m-4"
onClick={() => handleClick(id, firedata.likes)}
/>
)}
<div key={id} className="cursor-pointer">
{users &&
users.map((user) => {
return (
<>
{firedata.email == user.email && (
<Link href={`/profile/${user.userid}`}>
<div key={user.userid}>
<div className="bg-slate-200 my-8 py-8 flex m-auto">
省略
</div>
</div>
</div>
</Link>
)}
</>
);
})}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default Post;
補足情報(FW/ツールのバージョンなど)
{
"name": "croud-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint"
},
"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"
}
}