React：組件在 state 更改后隨機不刷新

Question

我正在研究一個 CRUD（快遞，mongoose，mongodb），它主要按預期工作......除了在刪除 X 數量的條目后呈現條目。
不刪除

有時我可以毫無問題地刪除 10 個條目，直到組件為空，而其他時候我刪除了一些條目，然后頁面停止呈現更新的數據並在瀏覽器中進入無限加載 state； 只有當我重新加載瀏覽器時，頁面才會呈現最新數據，但它確實刪除了條目，它似乎只是凍結了！

From React:
useEffect(() => {
    queryClient.invalidateQueries(["allUsers"]);
  });

const mutation = useMutation({
    mutationFn: async (userid) => {
      return await axios.delete("/api/deleteuser", { data: { userid: userid } });
    },
  });

 const handleDelete = (userid) => {
    mutation.mutate(userid);
    navigate("/", { replace: true });
  };

From Mongoose
const deleteUser = async (req, res) => {
  try {
    await newUser.findOneAndDelete({ userid: req.body.userid });
  } catch (error) {
    return error;
  }
};

嘗試在刪除 function 時使查詢緩存無效，但結果相同。 它只是隨機發生的，就好像請求沒有被滿足一樣......在開發工具中。網絡請求永遠不會被滿足但是數據，無論何時工作，都會被更新。 網絡/待定

編輯：我使用的是 mongoDB 免費帳戶......我讀過有時響應時間不是最好的，也許這是原因？

Answer 1

1. 沒有依賴數組的useEffect是毫無意義的。 每次重新渲染組件時它都會運行。
2. 我假設您正在使用反應查詢。 嘗試將queryClient.invalidate移動到useMutation配置 object 中的onSuccess或onSettled 。這將確保您的查詢僅在突變完成后才失效。 https://react-query-v3.tanstack.com/guides/mutations#mutation-side-effects