为什么我的 React Query 在删除后没有立即更新 UI？使用 SUPABASE

Question

每次执行删除时，supabase数据库都会立即更新，但UI上却没有更新，该怎么办请帮忙！！

我添加了EntryTable，在其中我正在渲染EntryRow，这就是我通过反应查询执行删除功能的地方

条目表

import React, { useState } from "react";
import { useEntrys } from "../entry/useEntry";
import Spinner from "./Spinner";
import Empty from "./Empty";
import Menus from "./Menus";
import Table from "./Table";
import EntryRow from "../entry/EntryRow";
import AddEntry from "../entry/AddEntry";

const EntryTable = () => {
  const { isLoading, entrys } = useEntrys();

  if (isLoading) return <Spinner />;

  if (!entrys.length) return <Empty resourceName="Entrys" />;

  return (
    <div>
      <Menus>
        <Table>
          <Table.Header>
            <div>Employee ID</div>
            <div>Emp Name</div>
            <div>edit/Delete</div>
          </Table.Header>
          <div className="employeeSection">
            <Table.Body
              data={entrys}
              render={(entrys) => <EntryRow entry={entrys} key={entrys.id} />}
            ></Table.Body>
          </div>
          <div className="elem2">
            <AddEntry />
          </div>
        </Table>
      </Menus>
    </div>
  );
};

export default EntryTable;

条目行

import React, { useEffect, useState } from "react";
import { useDeleteEntry } from "./useDeleteEntry";
import { useCreateEntry } from "./useCreateEntry";
import Table from "../ui/Table";
import Modal from "../Modal";
import Menus from "../ui/Menus";

import { FaEye, FaPencil, FaRegTrashCan } from "react-icons/fa6";
import CreateEntryForm from "./CreateEntryForm";
import ConfirmDelete from "../ui/ConfirmDelete";
import ShowEntry from "./ShowEntry";
import { supabase } from "../supabase";

const EntryRow = ({ entry, handleDelete }) => {
  const { isDeleting, deleteEntry } = useDeleteEntry();

  const [showForm, setShowForm] = useState(false);

  const { isCreating, createEntry } = useCreateEntry();

  const [empId, setEmpId] = useState(null);

  const { emp_id, emp_name } =
    entry;

  return (
    <div className="tableRow">
      <Table.Row>
        <strong className="employeeList">
         
          <p className="emp_id">{emp_id}</p>
          <p className="empName">{emp_name}</p>
        </strong>
      </Table.Row>
      <div className="menuContainer">
        <Modal>
          <Menus.Menu>
            <Menus.Toggle id={emp_id} />
            <Menus.List id={emp_id}>
              <Modal.Open opens="edit">
                <Menus.Button icon={<FaPencil />}>Edit</Menus.Button>
              </Modal.Open>

              <Modal.Open opens="show-details">
                <Menus.Button icon={<FaEye />}>Show Details</Menus.Button>
              </Modal.Open>

              <Modal.Open opens="delete">
                <Menus.Button icon={<FaRegTrashCan />}>Delete</Menus.Button>
              </Modal.Open>
            </Menus.List>

            <Modal.Window name="edit">
              <CreateEntryForm entryToEdit={entry} />
            </Modal.Window>

            <Modal.Window name="show-details">
              <ShowEntry entry={entry} />
            </Modal.Window>
          </Menus.Menu>

          <Modal.Window name="delete">
            <ConfirmDelete
              resourceName="entrys"
              disabled={isDeleting}
              onConfirm={() => deleteEntry(emp_id)}
            />
          </Modal.Window>
        </Modal>
      </div>
    </div>
  );
};

export default EntryRow;

API SUPABASE

export const deleteEntry = async (id) => {
  const { data, error } = await supabase
    .from("empManagement")
    .delete()
    .eq("emp_id", id)
    .select();

  if (error) {
    console.log(error);
    throw new Error("Employee entry slot couldn't be deleted");
  }

  return data;
};

删除反应查询

import { deleteEntry as deleteEntryAPI} from "../api/apiEntry";
import { useMutation, useQueryClient } from "@tanstack/react-query";

import toast from "react-hot-toast";

export const useDeleteEntry = () => {
  const queryClient = useQueryClient();

  const { isLoading: isDeleting, mutate: deleteEntry } = useMutation({
    mutationFn: deleteEntryAPI,
    onSuccess: () => {
      toast.success("Entry deleted");
      queryClient.invalidateQueries({
        queryKey: ["empManangement"],
      });
    },
    onError: (err) => toast.error(err.message),
  });
  return { isDeleting, deleteEntry };
};

如果我需要传递任何本地状态才能更新 UI，他们会让我知道应该如何传递...

Answer 1

我只用过Vue，所以对React不太了解，但我觉得方法是一样的，所以就放在这里了。

经过搜索，我发现应该使用“useRef”来让我知道值已经改变了。