Компонент не перерисовывает после удаления React
После удаления сотрудника не перерисовывается компонент, соответственно пользователь не видит то, что сотрудник действительно удалён.
import style from "./Staff.module.scss";
import { useDispatch, useSelector } from "react-redux";
import search from "../../images/searc.svg";
import clear from "../../images/closed.svg";
import { searchValue } from "../../redux/slices/searchSlice";
import ModalStaff from "./ModalStaff";
import { useState, useEffect } from "react";
import { setStaff, deleteStaff } from "../../redux/slices/staff";
import axios from "axios";
const Staff = () => {
const staff = useSelector((state) => state.staff.staff);
const searchInput = useSelector((state) => state.search.searchInput);
const dispatch = useDispatch();
const [modal, setModal] = useState(false);
const [oneStaff, setOneStaff] = useState({});
const [reloadStaff, setReloadStaff] = useState(false);
useEffect(() => {
const fetchStaff = async () => {
try {
const response = await fetch("http://localhost:4000/api/staff");
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
setStaff(data);
} catch (error) {
console.error("Ошибка при загрузке списка сотрудников:", error);
// Обработка ошибки
} finally {
setReloadStaff(false); // Сбрасываем флаг после завершения
}
};
if (reloadStaff) {
fetchStaff();
}
}, [reloadStaff]);
const edit = (obj) => {
setOneStaff(obj);
setModal(true);
};
const openAddModal = () => {
setOneStaff({
name: "",
qualifications: "",
contact_info: "",
});
setModal(true);
};
const handleDeleteStaff = async (id) => {
try {
if (window.confirm("Вы действительно хотите удалить сотрудника?")) {
const response = await axios.delete(
`http://localhost:4000/api/staff/${id}`
);
setReloadStaff(true);
setStaff((prevStaff) => prevStaff.filter((item) => item.id !== id));
}
} catch (error) {
console.error("Ошибка удаления сотрудника:", error);
if (error.response) {
console.error("Ответ сервера:", error.response.data);
alert("Ошибка удаления сотрудника: " + error.response.data.message);
} else {
alert("Произошла ошибка при удалении сотрудника.");
}
}
};
return (
<>
<ModalStaff
oneStaff={oneStaff}
visible={modal}
setVisible={setModal}
setOneStaff={setOneStaff}
/>
<div className={style.root}>
<h1>Список сотрудников</h1>
<div className={style.searchAdd}>
<button onClick={openAddModal}>Добавить нового сотрудника</button>
<img src={search} alt="поиск" className={style.search} />
<input
type="text"
placeholder="Поиск сотрудника..."
value={searchInput}
onChange={(event) => dispatch(searchValue(event.target.value))}
/>
{searchInput && (
<img
src={clear}
alt="Очистить"
className={style.clear}
onClick={() => dispatch(searchValue(""))}
/>
)}
</div>
<div className={style.listStaff}>
{staff.length > 0
? staff
.filter(
(obj) =>
obj.name
.toLowerCase()
.includes(searchInput.toLowerCase()) ||
obj.contact_info
.toLowerCase()
.includes(searchInput.toLowerCase()) || // Отдельно условие для contact_info
obj.qualifications
.toLowerCase()
.includes(searchInput.toLowerCase())
)
.map((item) => (
<div key={item.id}>
<div className={style.item}>
<div className={style.info}>
<p>ФИО: {item.name}</p>
<p>Должность: {item.qualifications}</p>
<p>Эл. почта: {item.contact_info}</p>
</div>
<div className={style.action}>
<button onClick={() => edit(item)}>
Редактировать
</button>
<button onClick={() => handleDeleteStaff(item.id)}>
Удалить
</button>
</div>
</div>
</div>
))
: ""}
{staff.filter(
(obj) =>
obj.name.toLowerCase().includes(searchInput.toLowerCase()) ||
obj.contact_info
.toLowerCase()
.includes(searchInput.toLowerCase()) || // Отдельно условие для contact_info
obj.qualifications
.toLowerCase()
.includes(searchInput.toLowerCase())
).length === 0 && (
<div className="root">
<span>?</span>
<br />
<p style={{ fontFamily: "Arial", marginBottom: 20 }}>
Ничего не найдено
</p>
</div>
)}
</div>
</div>
</>
);
};
export default Staff;
Код моего компонента. Серверная часть реализована на node.js
const { Staff } = require("../models/models");
class StaffController {
async create(req, res) {
try {
const { name, contact_info, qualifications, geId } = req.body;
const staff = await Staff.create({
name,
contact_info,
qualifications,
geId,
});
return res.json(staff);
} catch (e) {
console.log(e);
}
}
async getAll(req, res) {
const staffs = await Staff.findAll();
return res.json(staffs);
}
async update(req, res) {
try {
const { id } = req.params; // Получаем ID сотрудника из параметров запроса
const { name, contact_info, qualifications, geId } = req.body; // Данные для обновления
// Проверяем, существует ли сотрудник с указанным ID
const staff = await Staff.findByPk(id);
if (!staff) {
return res.status(404).json({ message: "Сотрудник не найден" });
}
// Обновляем данные сотрудника
await staff.update({
name,
contact_info,
qualifications,
geId,
});
// Возвращаем обновленные данные сотрудника
return res.json(staff);
} catch (error) {
console.error("Ошибка обновления сотрудника:", error);
return res.status(500).json({ message: "Ошибка сервера" });
}
}
async deleteStaff(req, res) {
try {
const { id } = req.params;
const staff = await Staff.findByPk(id);
if (!staff) {
return res.status(404).json({ message: "Сотрудник не найден" });
}
await staff.destroy();
return res.status(204).send(); // 204 No Content - хороший ответ для удаления
} catch (error) {
console.error("Ошибка удаления сотрудника:", error);
return res.status(500).json({ message: "Ошибка сервера" });
}
}
}
module.exports = new StaffController();