import {useState, useEffect} from "react";
import EditModal from "./EditModal.jsx";
function DisplayCollects() {
const [data, setData] = useState([]);
const [input, setInput] = useState({
company: "",
date: "",
product: "",
})
useEffect(() => {
async function fetchData() {
try {
const result = await axios("http://localhost:3000/");
setData(result.data);
}
catch (err) {
console.error(err);
}
}
fetchData();
}, [])
function handleInput(event) {
const {name, value} = event.target;
if (name == "company") {
setInput({...input, company: value});
}
if (name == "date") {
setInput({...input, date: value});
}
if (name == "product") {
setInput({...input, product: value});
}
}
async function addCollect() {
try {
await axios.post("http://localhost:3000/add", input);
window.location.reload();
}
catch (err) {
console.error(err);
window.alert(err);
}
}
async function doneCollect(itemId) {
try {
await axios.post("http://localhost:3000/done", {itemId});
window.location.reload();
}
catch (err) {
console.error(err);
window.alert(err);
}
}
async function deleteCollect(itemId) {
try {
await axios.post("http://localhost:3000/delete", {itemId});
window.location.reload();
}
catch (err) {
console.error(err);
window.alert(err);
}
}
async function editCollect(input) {
try {
await axios.post("http://localhost:3000/edit", input);
window.location.reload();
}
catch (err) {
console.error(err);
window.alert(err);
}
}
return (
Id
Empresa
Data
Material
{data.map((item, index) =>
{item.id}
{item.company}
{item.date}
{item.product}


)}

)
}
export default DisplayCollects;
< /code>
Dies ist die editModale Komponente: < /p>
import { useState } from "react";
function EditModal({editCollect, itemId}) {
console.log(itemId);
const [input, setInput] = useState({
input: itemId,
company: "",
date: "",
product: "",
});
function handleInput(event) {
const {name, value} = event.target;
if (name == "company") {
setInput({...input, company: value});
}
if (name == "date") {
setInput({...input, date: value});
}
if (name == "product") {
setInput({...input, product: value});
}
}
function openDialog() {
const dialog = document.getElementById("form");
dialog.showModal();
}
return (
Empresa
Data
Material


)
}
export default EditModal;
< /code>
Und dies ist das Backend: < /p>
app.post("/edit", async (req, res) => {
console.log(req.body);
try {
await db.query("UPDATE coletas SET company = $1, date = $2, product = $3 WHERE id = $4", [req.body.company, req.body.date, req.body.product, req.body.input]);
res.send("ok");
}
catch (err) {
console.error(err);
}
})
< /code>
Ein Bild, das besser veranschaulichen wird. Die ersten 3 Konsolen sind die ID jedes Elements in der Liste. Ich habe geklickt, um das letzte Element zu bearbeiten, aber wenn ich es tete, proteting ich die ID des ersten Elements und sende die ID des ersten Elements an die Backend, wenn ich auf die Taste DEMED -DEGEBETTE IT -Taste klicke. src = "https://i.static.net/3k3auxwl.png"/>