0

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

実現したいこと
現在ポートフォリオで作成しているカード部分をコンポーネント化までできたのですが、削除したおができず、写真のようなエラーが出ます。
[![画像の説明をここに入力][1]][1]

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'indexOf')

Source
layouts/Cardpost.jsx (109:26) @ deleteDocument

  107 | 
  108 |   const deleteDocument = (id) => {
> 109 |     let fieldToEdit = doc(database, "CRUD DATA", id);
      |                          ^
  110 |     let checkSaveFlg = window.confirm("削除しても大丈夫ですか?");
  111 | 
  112 |     if (checkSaveFlg) {

home.jsの一つにまとめるとエラーが出ないのですが、分けると出てしまいます。
原因がまだわかっていないのですが、記述ミスなどでしょうか。
よろしくお願いします

#Cardpost.jsx
import React from "react";
import Link from "next/link";
import { useEffect, useState } from "react";
import { app, database } from "../firebaseConfig";
import {
  collection,
  addDoc,
  getDocs,
  doc,
  updateDoc,
  deleteDoc,
  Firestore,
} from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth } from "firebase/auth";
import styles from "../styles/Home.module.css";
import { updatePassword } from "firebase/auth";
import { MuiNavbar } from "./components/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";
import { getStorage } from "firebase/storage";
import Image from "react-image-resizer";
import Avatar from "@mui/material/Avatar";

export const Cardpost = ({
  downloadURL,
  id,
  title,
  categori,
  netabare,
  displayname,
  context,
  email,
  photoURL,
  createtime,
}) => {
  const [ID, setID] = useState(null);
  const [name, setName] = useState("");
  const [age, setAge] = useState(null);
  const [isUpdate, setIsUpdate] = useState(false);
  const [opentext, setOpentext] = useState(false);
  const databaseRef = collection(database, "CRUD DATA");
  const [displayName, setDisplayName] = useState("");
  const [createObjectURL, setCreateObjectURL] = useState(null);
  const [image, setImage] = useState("");
  const [result, setResult] = useState("");
  const styles = { whiteSpace: "pre-line" };

  let router = useRouter();
  const auth = getAuth();
  const user = auth.currentUser;

  const getData = async () => {
    await getDocs(databaseRef).then((response) => {
      setFiredata(
        response.docs.map((data) => {
          return { ...data.data(), id: data.id };
        })
      );
    });
  };

  const getID = (
    id,
    name,
    age,
    title,
    context,
    downloadURL,
    categori,
    cratetime,
    displayname,
    netabare,
    photoURL,
    userid
  ) => {
    setID(id);
    setContext(context);
    setTitle(title);
    setName(name);
    setAge(age);
    setDisplayName(displayname);
    setDownloadURL(downloadURL);
    setIsUpdate(true);
    setCategori(categori);
    setCreatetime(cratetime);
    setNetabare(netabare);
    setPhotoURL(photoURL);
    setUserid(userid);
    console.log(title);
  };

  const deleteDocument = (id) => {
    let fieldToEdit = doc(database, "CRUD DATA", id);
    let checkSaveFlg = window.confirm("削除しても大丈夫ですか?");

    if (checkSaveFlg) {
      deleteDoc(fieldToEdit)
        .then(() => {
          alert("記事を削除しました");
          getData();
        })
        .catch((err) => {
          alert("記事の削除に失敗しました");
        });
    } else {
      router.push("/home");
    }
  };

  const Opentext = () => {
    if (opentext == false) {
      setOpentext(true);
    } else {
      setOpentext(false);
    }
  };

  return (
    <div>
      <Grid key={id} className="flex m-auto">
        <Card className="lg:w-full m-8">
          <p className="m-auto text-center">
            <Image
              className="m-auto text-center max-w-sm"
              height={300}
              width={300}
              src={downloadURL}
            />
          </p>
          <CardContent>
            <Typography gutterBottom component="div" className="w-3/5 text-xl ">
              {title}
            </Typography>
            <Typography variant="body2" color="text.secondary">
              {categori == "ONE PIECE" && (
                <p className="bg-blue-500 p-2 inline-block text-white text-center">
                  {categori}
                </p>
              )}
              {categori == "呪術廻戦" && (
                <p className="bg-purple-500 p-2 inline-block text-white text-center">
                  {categori}
                </p>
              )}
              {categori == "東京リベンジャーズ" && (
                <p className="bg-rose-500 p-2 inline-block text-white text-center">
                  {categori}
                </p>
              )}
              {categori == "キングダム" && (
                <p className="bg-yellow-500 p-2 inline-block text-white text-center">
                  {categori}
                </p>
              )}
              <br></br>

              {netabare == "ネタバレ有" && (
                <div>
                  <p className="bg-yellow-500 mt-2 p-1 inline-block text-white text-center">
                    {netabare}
                  </p>
                  <br></br>
                  <button
                    onClick={Opentext}
                    className="bg-yellow-500 mt-2 p-1 inline-block text-white text-center"
                  >
                    表示する
                  </button>
                  {opentext == true && <p className="">{context}</p>}
                </div>
              )}

              {netabare == "ネタバレ無" && (
                <p className="bg-blue-500 mt-2 p-1 inline-block text-white text-center">
                  {netabare}
                </p>
              )}

              <br></br>
              <div className="w-80 m-auto" style={styles}>
                {netabare == "ネタバレ無" && <p className="">{context}</p>}
              </div>

              <br></br>
              <Avatar alt="Remy Sharp" src={photoURL} />
              <p>{displayname}</p>
              <br></br>
              {createtime}
            </Typography>
          </CardContent>

          {user.email == email && (
            <CardActions>
              <Button
                variant="outlined"
                onClick={() => getID(id, name, age, title, context)}
              >
                更新する
              </Button>
              <Button
                variant="outlined"
                key={id}
                onClick={() => deleteDocument(id)}
              >
                削除する
              </Button>
            </CardActions>
          )}
        </Card>
      </Grid>
    </div>
  );
};


import Link from "next/link";
import { useEffect, useState } from "react";
import { app, database, ref } from "../firebaseConfig";
import {
  collection,
  getDocs,
  doc,
  updateDoc,
  deleteDoc,
} from "firebase/firestore";
import { useRouter } from "next/router";
import { getAuth } from "firebase/auth";
import styles from "../styles/Home.module.css";
import { updatePassword } from "firebase/auth";
import { MuiNavbar } from "../layouts/components/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";
import { getStorage } from "firebase/storage";
import Image from "react-image-resizer";
// import { Search } from "./Search";
import { Cardpost } from "../layouts/Cardpost";
import Avatar from "@mui/material/Avatar";

export default function Home() {
  const [ID, setID] = useState(null);
  const [title, setTitle] = useState("");
  const [context, setContext] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [age, setAge] = useState(null);
  const [categori, setCategori] = useState("");
  const [firedata, setFiredata] = useState([]);
  const [createtime, setCreatetime] = useState("");
  const [isUpdate, setIsUpdate] = useState(false);
  const databaseRef = collection(database, "CRUD DATA");
  const [displayname, setDisplayName] = useState("");
  const [createObjectURL, setCreateObjectURL] = useState(null);
  const [downloadURL, setDownloadURL] = useState(null);
  const [image, setImage] = useState("");
  const [result, setResult] = useState("");
  const [photoURL, setPhotoURL] = useState("");
  const [userid, setUserid] = useState(null);
  const [netabare, setNetabare] = useState("");
  const [opentext, setOpentext] = useState(false);
  const styles = { whiteSpace: "pre-line" };
  let router = useRouter();

  const auth = getAuth();
  const user = auth.currentUser;
  // console.log(user);
  useEffect(() => {
    let token = sessionStorage.getItem("Token");

    if (token) {
      getData();
    }
    if (!token) {
      router.push("/register");
    }
  }, []);

  const getData = async () => {
    await getDocs(databaseRef).then((response) => {
      setFiredata(
        response.docs.map((data) => {
          return { ...data.data(), id: data.id };
        })
      );
    });
  };

  const getID = (
    id,
    name,
    age,
    title,
    context,
    downloadURL,
    categori,
    cratetime,
    displayname,
    netabare,
    photoURL,
    userid
  ) => {
    setID(id);
    setContext(context);
    setTitle(title);
    setName(name);
    setAge(age);
    setDisplayName(displayname);
    setDownloadURL(downloadURL);
    setIsUpdate(true);
    setCategori(categori);
    setCreatetime(cratetime);
    setNetabare(netabare);
    setPhotoURL(photoURL);
    setUserid(userid);
    console.log(title);
  };


  const updatefields = () => {
    let fieldToEdit = doc(database, "CRUD DATA", ID);
    updateDoc(fieldToEdit, {
      title: title,
      context: context.replace(/\r?\n/g, "\n"),
    })
      .then(() => {
        alert("記事を更新しました");
        setContext("");
        setTitle("");
        setIsUpdate(false);
        getData();
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // const deleteDocument = (id) => {
  //   let fieldToEdit = doc(database, "CRUD DATA", id);
  //   let checkSaveFlg = window.confirm("削除しても大丈夫ですか?");

  //   if (checkSaveFlg) {
  //     deleteDoc(fieldToEdit)
  //       .then(() => {
  //         alert("記事を削除しました");
  //         getData();
  //       })
  //       .catch((err) => {
  //         alert("記事の削除に失敗しました");
  //       });
  //   } else {
  //     router.push("/home");
  //   }
  // };

  const Opentext = () => {
    if (opentext == false) {
      setOpentext(true);
    } else {
      setOpentext(false);
    }
  };

  return (
    <div>
      <Head>
        <title>漫画考察.net/ホーム画面</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <MuiNavbar />
      <br></br>
      <div className="max-w-7xl m-auto">
        <div className="lg:text-right text-center">
          <Button variant="outlined" className="">
            <Link href="/post">新規投稿をする</Link>
          </Button>
          {/* <Search /> */}
        </div>
        <h2 className="m-5 my-12 text-center text-2xl font-semibold">
          投稿一覧
        </h2>
        <p className="text-1xl text-center">投稿数 {firedata.length}件</p>

        <Grid container spacing={1}>
          {firedata.map((data) => {
            return (
              <Cardpost
                key={data.id}
                downloadURL={data.downloadURL}
                title={data.title}
                categori={data.categori}
                netabare={data.netabare}
                context={data.context}
                createtime={data.createtime}
                displayname={data.displayname}
                email={data.email}
                className="lg:w-full m-8"
              />
            );
          })}
        </Grid>

        <br></br>
        <br></br>
        {isUpdate && (
          <Box
            component="form"
            sx={{
              "& > :not(style)": { m: 1, width: "25ch" },
            }}
            noValidate
            autoComplete="off"
          >
            <TextField
              id="outlined-basic"
              label="タイトル(最大20文字)"
              variant="outlined"
              type="text"
              value={title}
              onChange={(event) => setTitle(event.target.value)}
            />

            <br></br>

            <TextField
              label="内容(最大500文字)"
              className="m-auto w-full"
              id="filled-multiline-static"
              multiline
              rows={14}
              type="text"
              value={context}
              onChange={(event) => setContext(event.target.value)}
            />
            <Button variant="outlined" onClick={updatefields}>
              更新する
            </Button>
            <br></br>
          </Box>
        )}
      </div>
    </div>
  );
}

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。