Fehler beim Aktualisieren eines Dokuments in MongoDB mit Mongoose als ODM und NextJs in Frontend [geschlossen] ⇐ JavaScript

[Anonymous]

import React, { useEffect, useState } from 'react'
import Image from 'next/image'
import underline from "../Image/underline.png"
import Link from "next/link"
import { useUser } from '@clerk/clerk-react'
import { ClerkProvider } from '@clerk/nextjs'
import { Github } from 'lucide-react'
import DialogViewer from "../Components/Dialog"
import { FaTrashAlt } from "react-icons/fa";
import { MdEdit } from "react-icons/md";

const FormDisplay = () => {
const { isLoaded, user } = useUser()
console.log(user)
const [formdata, setFormdata] = useState({
name_project: "",
desc_project: "",
url_project: "",
name_comp: "",
date_comp: "",
url_comp: "",
image_url: "",
website_url: ""
})
let name, value;
const handleInput = (e) => {
name = e.target.name;
value = e.target.value;
setFormdata({ ...formdata, [name]: value })
}

const submit = async (e) => {
e.preventDefault()
const { name_project, desc_project, url_project, name_comp, date_comp, url_comp, image_url, website_url } = formdata
const formData = {
"name_project": name_project,
"desc_project": desc_project,
"url_project": url_project,
"prizes": [
{
"name_comp": name_comp,
"date_comp": date_comp,
"url_comp": url_comp
}
],
"image_url": image_url,
"website_url": website_url,
"clerkID": user.id
}

const response = await fetch("/api/addProject", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData)
})

const result = await response.json()
console.log(result)
if (result.success === true) {
window.location.reload()
}

}
return (




Title:

Description:

Project URL:

Image URL:

Website URL:

Name of Competition:

Date of Competition:

URL of Competition:


Submit


)
}

const Page = () => {
const [projectData, setprojectData] = useState(null)
const [runned, setRunned] = useState(false)
const { isLoaded, user } = useUser()
const [selectedProjectId, setSelectedProjectId] = useState(null);

const getProjectData = async () => {
if (!runned) {
try {
const response = await fetch("/api/getProject");
const data = await response.json();
setprojectData(data.data);
// console.log("Fetched Data:", data);
setRunned(true);
} catch (error) {
console.error("Cannot fetch data: ", error);
}
}
};
const deleteData = async (item) => {
const _id = item.currentTarget.id
console.log(_id)
const confirmed = window.confirm("Are you sure you want to delete this project?")
if (confirmed == true) {
try {
const response = await fetch("/api/deleteProject", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ _id: _id })
})
const data = await response.json()
console.log(data)
if (data.success === true) {
window.location.reload()
}
} catch (error) {
console.log("Cannot delete the project: ", error)
}
}
}

useEffect(() => {
getProjectData();
}, []);

const Edit_FormDisplay = (item) => {
const [data, setData] = useState()

const [formdata, setFormdata] = useState({
name_project: "",
desc_project: "",
url_project: "",
name_comp: "",
date_comp: "",
url_comp: "",
image_url: "",
website_url: ""
})
useEffect(() => {
const fetchOneProjectData = async () => {
const _id = item.currentTarget.id
console.log(_id)
try {
const response = await fetch("/api/getOneProject", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ _id: _id })
})
const result = await response.json()
console.log(result)
setData(result.data)
} catch (error) {
console.log("Cannot delete the project: ", error)
}
}

fetchOneProjectData()
}, [item])

useEffect(() => {
if (data) {
setFormdata({
name_project: data.name_project || "",
desc_project: data.desc_project || "",
url_project: data.url_project || "",
name_comp: data.prizes?.[0]?.name_comp || "",
date_comp: data.prizes?.[0]?.date_comp || "",
url_comp: data.prizes?.[0]?.url_comp || "",
image_url: data.image_url || "",
website_url: data.website_url || ""
});
}
}, [data]);
const handleInput = (e) => {
const { name, value } = e.target;
setFormdata({ ...formdata, [name]: value });
};

const submit = async (e) => {
e.preventDefault();
const { name_project, desc_project, url_project, name_comp, date_comp, url_comp, image_url, website_url } = formdata;
const formData = {
name_project,
desc_project,
url_project,
prizes: [
{
name_comp,
date_comp,
url_comp
}
],
image_url,
website_url,
};

try {
const response = await fetch("/api/editProject", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData)
});
const result = await response.json();
console.log(result);
if (result.success) {
window.location.reload();
}
} catch (error) {
console.log("Error editing project:", error);
}

}
return (




Title:

Description:

Project URL:

Image URL:

Website URL:

Name of Competition:

Date of Competition:

URL of Competition:


Submit


)
}

return (

My Projects

{!user ? "" : !user.publicMetadata.role ? "" : user.publicMetadata.role === "admin" ? : ""}



{projectData === null ? ( Loading.... ) :

(Array.isArray(projectData) && projectData.map((data) => {
return (



{/* */}




{!user ? "" : !user.publicMetadata.role ? "" : user.publicMetadata.role === "admin" ?

: ""}
{!user ? "" : !user.publicMetadata.role ? "" : user.publicMetadata.role === "admin" ? : ""}


{data.name_project}
{data.desc_project}

Prizes

{Array.isArray(data.prizes) && data.prizes.map((data) => {
console.log(data)
return (

Name:  

{data.name_comp}
Participated in: {data.date_comp}

)
})}



  View On Github  
Visit Website


)
}))}


)
}

export default Page
< /code>
Dies ist der Dialog -Viewer < /p>
import React from 'react'
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "../../components/components/ui/dialog"

const DialogViewer = ({ trigger_name, title, description, formElement }) => {
return (


{trigger_name === "+ Add New Project"
? (

{trigger_name}

)
: (


{trigger_name}


)
}


{title}

{description}
{formElement}





)
}

export default DialogViewer

< /code>
Ich habe versucht, eine Seite zu implementieren, auf der ich alle Projekte aus der MongoDB -Datenbank anzeigen und alle CRUD -Vorgänge ausführen kann. Die Funktionen Funktionen erstellen, lesen und löschen. Was kann eine alternative Methode dafür sein? Haken können nur innerhalb des Körpers einer Funktionskomponente aufgerufen werden. Dies könnte aus einem der folgenden Gründe passieren: < /p>

Sie haben möglicherweise nicht übereinstimmende Versionen von React und der Renderer (wie React Dom) < /li>
Sie könnten die Regeln von Hooks brechen. https://react.dev/link/invalid-hook-call für Tipps zum Debuggen und Behebung dieses Problems. IT.
Bitte helfen Sie mir, das Problem im obigen Bild zu lösen.