Блог

Я пытаюсь выполнить действие по удалению своих данных. Текущая функция handleDelete помещается в пользовательский хук, называемый useFetchClubAdminData . Этот крючок отвечает за выполнение некоторых вызовов API на основе результата одного из них, например:

 useEffect(() =gt; {  getUserClub2().then((id) =gt; {  getInfoClub(id);  getInfoTeams(id);  });  }, []);  

handleDelete выглядит так

 const handleDelete = async (id) =gt; {  try {  const deleteTeam = await axios({  url: BASE_URL   "teams",  method: "DELETE",  headers: {  "Content-Type": "application/x-www-form-urlencoded",  Authorization: "Bearer "   token,  },  params: {  team_id: id,  club_id: 1,  },  });   console.log(deleteTeam, "delete result"); // the result is an object with data key containing an array of the new teams.   setTeams(deleteTeam.data[0]);  } catch (e) {  Notify(e.message, "err");  }  };  

эта функция срабатывает в таком onClick случае

 function PopUp({ id }) {  let { handleDelete } = useFetchClubAdminData();   const submit = () =gt; {  confirmAlert({  title: "Confirm to submit",  message: "Are you sure to do this.",  buttons: [  {  label: "Yes",  onClick: () =gt; {  return handleDelete(id);  },  },  {  label: "No",  onClick: () =gt; alert("the id is"   id),  },  ],  });  };  return (  lt;divgt;  {" "}  lt;div className="container" onClick={() =gt; submit()}gt;  lt;MdDelete  size={22}  color="white"  style={{ padding: "0px", margin: "3px" }}  /gt;{" "}  lt;/divgt;  lt;/divgt;  ); } export default PopUp;  

Я не знаю, что здесь может быть не так. Я попытался использовать useCallBack крюк, чтобы добавить эту функцию в useEffect и запустить эффект, как только мы изменим teams , но все равно не повезло. Также это не работает при фильтрации массива в состоянии.

PD: просто чтобы убедиться, что элемент удален из базы данных, но не обновляет состояние компонента, и поэтому мы можем обновить пользовательский интерфейс.

Я использую React v17.0.2