Wenn das Modal/Dialog -Tag geöffnet ist, ist die ausgewählte ID falschJavaScript

Javascript-Forum
Anonymous
 Wenn das Modal/Dialog -Tag geöffnet ist, ist die ausgewählte ID falsch

Post by Anonymous »

Ich erstelle einen einfachen Crud, es wird bereits erstellt, gelesen und löschen, aber noch nicht richtig aktualisiert. Geöffnet, aber die ID ist 1 und anstatt die Elementliste zu aktualisieren, klicke ich immer auf das erste Element der Liste.import axios from "axios";
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}

Image



Image


)}








Image




)
}

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








Image





Image

)
}

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"/>

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post