Gunakan cangkuk useState untuk mengekalkan nilai berterusan merentas pelbagai panggilan fungsi

Question

Saya memanggil fungsi "deleteDepartment" pada butang untuk memadam baris jabatan dalam jadual. Dapatkan indeks baris yang dipilih daripada jadual (saya menggunakan jadual shancn menggunakan jadual tanstack) dalam cangkuk "selectedRows" (lulus setSelectedRows sebagai prop kepada komponen jadual yang mendapat nilai daripada cangkuk rowSelection dalam jadual).

Masalahnya ialah: Saya dapat memadamkan dua atau tiga baris pertama tanpa sebarang masalah, tetapi apabila saya meneruskan pemadaman, keadaan "rowSelection" menyimpan nilai daripada panggilan fungsi sebelumnya dan perubahan Ia ditambahkan pada tatasusunan baris yang sedang dipilih.

Contoh: Jika saya memadam baris['1'] dan kali seterusnya saya mengklik butang untuk memadam baris 2, maka nilai 'rowSelection' sepatutnya Hanya ['2'], tetapi ia ditambahkan pada nilai sebelumnya seperti ['1', '2'].

Saya tersesat mengapa tingkah laku ini berlaku. Saya fikir ini mungkin disebabkan oleh penutupan dan sifat async, jadi saya menggunakan cangkuk useCallback, tetapi ia tidak berfungsi. Tolong bantu seseorang yang mempunyai pengetahuan yang lebih baik

const DepartmentsAndRolesPage = () =>
  const [jabatan, setDepartments] = useState<departmentTypes[]>([]);
  const [selectedRows, setSelectedRows] = useState({});
  const [rowIndexes, setRowIndexes] = useState<rentetan[]>([]);

  useEffect(() => {
    getDepartment();
  }, []);

  useEffect(() => {
    const indexesToAdd = Object.keys(selectedRows);
    setRowIndexes(indexesToAdd);
  }, [Barisan yang dipilih]);

  const deleteDepartment = useCallback(async () => {

    if (rowIndexes.length === 0) {
      kembali;
    }

    if (rowIndexes.length === 1) {
      const filteredDepartment = departments[parseInt(rowIndexes[0])];
      const id = filteredDepartment._id;
      respons const = tunggu axios.delete(`/api/department/delete/${id}`);
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      kembali;
    }

    if (rowIndexes.length > 1) {
      const departmentsToDelete = rowIndexes.map(
        (rowIndex) => jabatan[parseInt(rowIndex)]._id
      );
      respons const = tunggu axios.post("/api/department/delete", {
        _id: departmentsToDelete,
      });
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      kembali;
    }
  }, [jabatan, rowIndexes, roti bakar]);
Kembali (selebihnya kod UI di sini.... )

Answer 1

Di penghujung fungsi pengendali padam anda, anda harus menetapkan rowIndexes kepada tatasusunan kosong.

const deleteDepartment = async () => {
   //你的函数代码...
   setRowIndexes([]);
   return;
}