Verwenden Sie den useState-Hook, um persistente Werte über mehrere Funktionsaufrufe hinweg beizubehalten

Question

Ich rufe die Funktion „deleteDepartment“ auf einer Schaltfläche auf, um die Abteilungszeile in der Tabelle zu löschen. Holen Sie sich den ausgewählten Zeilenindex aus der Tabelle (ich verwende die Shancn-Tabelle mithilfe der Tanstack-Tabelle) im Hook „selectedRows“ (übergeben Sie setSelectedRows als Requisite an die Tabellenkomponente, die den Wert vom RowSelection-Hook in der Tabelle erhält).

Das Problem ist: Ich kann die ersten zwei oder drei Zeilen problemlos löschen, aber wenn ich mit dem Löschen fortfahre, speichert der Status „rowSelection“ den Wert aus dem vorherigen Funktionsaufruf und Änderungen Es wird dem aktuell ausgewählten Zeilenarray hinzugefügt.

Beispiel: Wenn ich Zeile['1'] lösche und das nächste Mal auf die Schaltfläche klicke, um Zeile 2 zu löschen, dann wird der Wert von 'rowSelection' sollte nur ['2'] sein, aber es wird zum vorherigen Wert hinzugefügt, wie ['1', '2'].

Ich weiß nicht, warum dieses Verhalten auftritt. Ich dachte, das könnte an Schließungen und der asynchronen Natur liegen, also habe ich den useCallback-Hook verwendet, aber es hat nicht funktioniert. Bitte helfen Sie jemandem mit besseren Kenntnissen

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

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

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

  const deleteDepartment = useCallback(async () => {

    if (rowIndexes.length === 0) {
      zurückkehren;
    }

    if (rowIndexes.length === 1) {
      const filteredDepartment = Departments[parseInt(rowIndexes[0])];
      const id = filteredDepartment._id;
      const Response = Warten auf axios.delete(`/api/department/delete/${id}`);
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      zurückkehren;
    }

    if (rowIndexes.length > 1) {
      const DepartmentsToDelete = rowIndexes.map(
        (rowIndex) => Abteilungen[parseInt(rowIndex)]._id
      );
      const Antwort = Warten auf axios.post("/api/department/delete", {
        _id: DepartmentsToDelete,
      });
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      zurückkehren;
    }
  }, [Abteilungen, rowIndexes, toast]);
Return (Rest des UI-Codes hier...)

Answer 1

在你的删除处理函数的最后，你应该将rowIndexes设置为空数组。

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