Я хочу обновить один элемент в списке, но он не обновляет ⇐ MySql

[Anonymous]

Я создал компонент, который состоят из списка сотрудников. Я хочу иметь возможность редактировать и удалять каждый элемент отдельно. Удаление работает по желанию, но обновление не работает. Моя база данных - mysql. < /P>
Это мой код < /h1>
import axios from "axios";
import { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import Student from "./Student";
import { FaGetPocket } from "react-icons/fa";
import { FaHome } from "react-icons/fa";
import { FaAmazonPay } from "react-icons/fa";
import { FaPlus } from "react-icons/fa";
import { FaRegEdit } from "react-icons/fa";
import { FaTimes } from "react-icons/fa";
import "./DashboardList.css"; // Custom CSS file
//import { Pagination } from "./Pagination";

function Updatestudent () {

const [users, setUsers] = useState([]);
const [error, setError] = useState("");

const navigate = useNavigate(); // Fix: Call useNavigate()

const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [age, setAge] = useState("");
const [id, setId] = useState("");
const [items, setItems] = useState([]);
const [selectedItem, setSelectedItem] = useState(null);
const [err, setErr] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage] = useState(5);

const [data, setData] = useState({
name: "",
email: "",
age: "",
});

useEffect(() => {
axios
.get("http://localhost:8081/users")
.then((res) => {
console.log(" Unique Data fetched:", res.data);
setItems(res.data);
//setData(res.data);
})
.catch((err) => {
console.error(" Error fetching data:", err);
setError("Failed to load data. Please check server.");
});
}, []);

//const indexOfLastPost = currentPage * postsPerPage;
//const indexOfFirstPost = indexOfLastPost - postsPerPage;
//const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);

const handleSelectItem = (itemId) => {
const item = items.find(i => i.id === itemId);
setSelectedItem(item);
setData(items);
};

//const handleChange = (e) => {
// setData({ ...items, [e.target.name]: e.target.value });
//};

const handleAdd= (event) => {
event.preventDefault();
axios
.post("http://localhost:8081/users", { name, email, age })
.then((res) => {
console.log(" Employee added successfully:", res);
navigate("/"); // Fix: Properly navigate after success
})
.catch((err) => console.error(" Error adding student:", err));
};

const handleChange = (e) => {
const { name, value } = e.target;
setData((prevData) => ({
...prevData,
[name]: value,
}));
};

const handleDelete = async (id) => {
try {
await axios.delete(`http://localhost:8081/student/${id}`);
navigate("/"); // Fix: Properly navigate after success
setUsers(users.filter((user) => user.id !== id)); // Optimized UI update without reloading
console.log(" Employee deleted successfully:", res);
} catch (err) {
console.error(" Error deleting student:", err);
}
};

const handleUpdate = async (id) => {
try {
await axios.put('http://localhost:8081/update/:id'+ id, items)
.then( (event) => {
console.log("Employee Updated successfully:", items);
navigate("/")}); // Fix: Properly navigate after success
} catch (err) {
console.log("Employee Updated successfully:", items);
}
};

const handleSubmit = (event) => {
event.preventDefault();

handleUpdate(id)
axios
.put('http://localhost:8081/update/:id'+ id, data )
.then((event) => {
console.log("Employee Updated successfully:", data);
navigate("/"); // Fix: Properly navigate after success
})
.catch((err) => console.error("Error Updating Employee:", err));
};

return (


Employees List

Add

• {items.map(item => (
  
  Edit
  {handleSelectItem(item.id)}}
  size="1.5rem" >
  
  Del.
  {if (confirm("Do you want to delete this item?")) {handleDelete(item.id)};}}
  size="1.5rem" >
  
  
  {item.name}
  
  
  {item.email}
  
  
  {item.age}
  
  
  ))}

{selectedItem && (


Details








{/* Display other item properties */}

handleUpdate(e,selectedItem.id)}>
Update






)}






)
}

export default Updatestudent;

< /code>
Когда я нажимаю кнопку «Редактировать», он отображает выбранную элемент с входами для редактирования.
Когда я нажимаю обновление, запись в базе данных MySQL должна быть обновлена. Ниже приведен код бэкэнд (сервер) < /p>
const express = require("express");
const cors = require("cors");
const mysql = require("mysql");

const app = express();
app.use(cors());
app.use(express.json()); // Enable JSON parsing

// MySQL Connection
const db = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "crud",
});

db.connect((err) => {
if (err) {
console.error("Database connection failed:", err);
return;
}
console.log("Connected to MySQL database");
});

// Fetch all users
app.get("/users", (req, res) => {
const sql = "SELECT * FROM users";
db.query(sql, (err, data) => {
if (err) {
console.error("SQL Query Error:", err);
return res.status(500).json({ error: "Database query failed" });
}
return res.json(data);
});
});

//Fetch a single user
app.get("/user/:id", (req, res) => {
const { id } = req.params.id; // Extract id from URL
const sql = "SELECT * FROM users WHERE id = ?";
db.query(sql, id, (err, data) => {
if (err) {
console.error("SQL Query Error:", err);
return res.status(500).json({ error: "Database query failed" });
}
return res.json(data);
});
});

// Add a new user
app.post("/users", (req, res) => {
const sql = "INSERT INTO users (`Name`, `Email`, `Age`) VALUES (?, ?, ?)";
const values = [req.body.name, req.body.email, req.body.age];

db.query(sql, values, (err, data) => {
if (err) {
console.error("SQL Insert Error:", err);
return res.status(500).json({ error: "Database insertion failed" });
}
return res.json({ message: "User added successfully", id: data.insertId });
});
});

// Update an existing user
app.put("/update/:id", (req, res) => {
const { id } = req.params; // Extract id from URL
db.query("UPDATE 'users' SET 'name' = ?, 'email' = ?, 'age' = ? WHERE 'id' = ?", [name, email, age], (err) => {
const values = [req.body.name, req.body.email, req.body.age];
if (err) return res.status(500).send(err);
res.send('Record updated successfully');
});
});

// Delete an existing user
app.delete("/student/:id", (req, res) => {
const sql = "DELETE FROM users WHERE ID = ?";
const id = req.params.id;

db.query(sql, id, (err, data) => {
if (err) {
console.error("SQL Delete Error:", err);
return res.status(500).json({ error: "Database deletion failed" });
}
return res.json({ message: "User deleted successfully" });
});
});

// Fetch single record
app.get('/record/user/:id', (req, res) => {
const {id} = req.params;
db.query('SELECT * FROM users WHERE id = ?', [id], (err, result) => {
if (err) return res.status(500).send(err);
res.json(result[0]);
});
});

// Update record
app.put('/record/:id', (req, res) => {
const id = req.params.id;
const { name1, email, age } = req.body; // Example fields
db.query('UPDATE users SET name = ?, email = ?, age = ? WHERE id = ?', [name1, email, age], (err) => {
const values = [req.body.name, req.body.email, req.body.age];
if (err) return res.status(500).send(err);
res.send('Record updated successfully');
});
});

// Start the server
app.listen(8081, () => {
console.log("Server is running on port 8081");
});



Подробнее здесь: https://stackoverflow.com/questions/797 ... t-updating