Компонент не перерисовывает после удаления 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();

Ответы (0 шт):