یک مشکل درآموزش آخرپروژه مخاطبین قبل ریفکتورکردن و رسیدن به فصل9

درود برشما استاد عزیز

بنده یک مشکلی داشتم که نه اروری میده نه مشکلی میخوره فقط زمانی که بنده میخوام یک مخاطبی رو حذف کنم هر کاری میکنم حتما باید صفحه رو رفرش کنم تا اون مورد حذف بشه همه موارد رو تست کردم والا نمیدونم دقیقا مشکل از کجاست چون نه ارور میخوره نه چیزی اون مورد forceRender هم پیاده سازی کردم بدون هیچ مشکلی برای ویرایش مخاطب کار میکنه ولی برای این نه من سورسم رو در اختیار میزارم خدمتتون.

import { useState, useEffect } from "react";
import "./App.css";
import { Route, Routes, Navigate, useNavigate, useSearchParams} from "react-router-dom";
import {
  Navbar,
  Contacts,
  AddContact,
  EditContact,
  VeiwContact,
} from "./components/index";


import {
  getAllContacts,
  getAllGroups,
  createContact,
  deleteContact,
} from "./services/serviceContacts";


import {confirmAlert} from "react-confirm-alert";
import { CURRENTLINE, FOREGROUND, PURPLE, YELLOW } from "./helpers/colors";


function App() {


  const navigate = useNavigate();
  const [getForceRender, setForceRander] = useState(false);
  const [loading, setLoading] = useState(false);
  const [searchParams, setSearchParams] = useSearchParams();
  const [query, setQuery] = useState({text: searchParams.get("contact" || "")});
  const [filterdContact, setFiltredContact] = useState([]);
  const [getContacts, setContacts] = useState([]);
  const [getGroups, setGroups] = useState([]);
  const [getContact, setContact] = useState({
    fullname: "",
    photo: "",
    mobile: "",
    email: "",
    group: "",
  });



  useEffect(() => {
    const FetchData = async () => {
      try {
        setLoading(true);
        const { data: AllContacts } = await getAllContacts();
        const { data: AllGroups } = await getAllGroups();
        setContacts(AllContacts);
        setFiltredContact(AllContacts);
        setGroups(AllGroups);
        setLoading(false);
      } catch (err) {
        console.error(err);
        setLoading(false);
      }
    };
   
    FetchData();
  }, []);
 
  useEffect(() => {
    const FetchData = async () => {
      try {
        setLoading(true);
        const { data: AllContacts } = await getAllContacts();
        setContacts(AllContacts);
        setLoading(false);
      } catch (err) {
        console.error(err);
        setLoading(false);
      }
    }
  FetchData();


  }, [getForceRender]);


  const createContactNew = async (event) => {
    event.preventDefault();


    const { status } = await createContact(getContact);


    if (status === 201) {
      setContact({})
      setForceRander(!getForceRender);
      navigate("/contacts");
    }
  };


  const setContactInfo = (event) => {
    setContact({
      ...getContact,
      [event.target.name]: event.target.value,
    });
  };


  const confirmAlertRemove = (contactId, contactFullname) => {
    confirmAlert({
      customUI: ({onClose}) => {
        return (
          <div dir="rtl" style={{backgroundColor: CURRENTLINE, border: `1px solid ${PURPLE}`, borderRadius: "1rem"}} className="p-4">
            <h1 style={{color: YELLOW}}>پاک کردن مخاطب</h1>
            <p style={{color: FOREGROUND}}>آیا مطمئن هستین که میخوای مخاطب {contactFullname} رو پاک کنید ؟</p>


            <button onClick={() => {
              removeContact(contactId);
              onClose();
            }} className="btn btn-success mx-2 p-2">بله</button>
            <button onClick={() => {
              onClose();
            }} className="btn btn-danger mx-2 p-2">خیر</button>
          </div>
        )
      }
    })
  }
   
  const removeContact = async(contactId) => {
    try{
      setLoading(true);
      const response = await deleteContact(contactId);
      setLoading(false)
      if (response.status === 200 || response.status === 204) {
        const {data: allCts} = await getAllContacts();
        setContacts(allCts);
        setLoading(false)
      }
    } catch (err) {
      console.log(err.message);
      setLoading(false)
    }
  }
 
 
 
  const searchContact = (event) => {
    let filter = event.target.value;


    if (filter) {
      setSearchParams({contact: filter});
    } else {
      setSearchParams({});
    }
    setQuery({...query, text: event.target.value});


    const allsContact = getContacts.filter((contact) => {
      return contact.fullname.includes(event.target.value);


    })
    setFiltredContact(allsContact);
  }
  return (
    <div className="App">
      <Navbar search={searchContact} query={query} />
      <Routes>
        <Route path="/" element={<Navigate to="/contacts" />} />
        <Route
          path="/contacts"
          element={<Contacts loading={loading} contacts={filterdContact} confirm={confirmAlertRemove} />}
        />
        <Route
          path="/contacts/add"
          element={
            <AddContact
              loading={loading}
              groups={getGroups}
              setContactInfo={setContactInfo}
              contact={getContact}
              createContactNew={createContactNew}
            />
          }
        />
        <Route path={`/contacts/edit/:contactId/`} element={<EditContact getForceRender={getForceRender} setForceRander={setForceRander} />} />
        <Route path="/contacts/:contactId" element={<VeiwContact />} />
      </Routes>
    </div>
  );
}


export default App;

این مورد برای app.js 
هستش و این مورد هم services

import axios from "axios";

const SERVER_URL = "http://localhost:8585";

export const getAllContacts = () => {
  const url = `${SERVER_URL}/contacts`;
  return axios.get(url);
};


export const getContact = (contactId) => {
  const url = `${SERVER_URL}/contacts/${contactId}`;
  return axios.get(url);
};


export const getAllGroups = () => {
  const url = `${SERVER_URL}/groups`;
  return axios.get(url);
};

export const getGroup = (groupId) => {
  const url = `${SERVER_URL}/groups/${groupId}`;
  return axios.get(url);
};


export const createContact = (contact) => {
  const url = `${SERVER_URL}/contacts`;
  return axios.post(url, contact);
};


export const updateContact = (contact, contactId) => {
  const url = `${SERVER_URL}/contacts/${contactId}`;
  return axios.put(url, contact);
};


export const deleteContact = (contactId) => {
  const url = `${SERVER_URL}/contacts/${contactId}`;
  return axios.delete(url);
};