Utilisez le hook useState pour conserver les valeurs persistantes sur plusieurs appels de fonction

Question

J'appelle la fonction "deleteDepartment" sur un bouton pour supprimer la ligne du département dans le tableau. Obtenez l'index de ligne sélectionné dans la table (j'utilise la table shancn en utilisant la table tanstack) dans le hook "selectedRows" (passez setSelectedRows comme accessoire au composant table qui obtient la valeur du hook rowSelection dans la table).

Le problème est : je parviens à supprimer les deux ou trois premières lignes sans aucun problème, mais lorsque je continue la suppression, l'état "rowSelection" enregistre la valeur de l'appel de fonction précédent. et modifications Il est ajouté au tableau de lignes actuellement sélectionné.

Exemple : Si je supprime la ligne ['1'] et que la prochaine fois que je clique sur le bouton pour supprimer la ligne 2, alors la valeur de 'rowSelection' devrait juste ['2'], mais il est ajouté à la valeur précédente comme ['1', '2'].

Je ne comprends pas pourquoi ce comportement se produit. Je pensais que cela pourrait être dû aux fermetures et à la nature asynchrone, j'ai donc utilisé le hook useCallback, mais cela n'a pas fonctionné. S'il vous plaît, aidez quelqu'un avec de meilleures connaissances

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(indexToAdd);
  }, [Rangées sélectionnées]);

  const deleteDepartment = useCallback(async () => {

    si (rowIndexes.length === 0) {
      retour;
    }

    si (rowIndexes.length === 1) {
      const filteredDepartment = départements[parseInt(rowIndexes[0])];
      const id = filteredDepartment._id ;
      const réponse = attendre axios.delete(`/api/department/delete/${id}`);
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      retour;
    }

    si (rowIndexes.length > 1) {
      const départementsToDelete = rowIndexes.map(
        (rowIndex) => départements[parseInt(rowIndex)]._id
      );
      const réponse = attendre axios.post("/api/department/delete", {
        _id : départementsToDelete,
      });
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      retour;
    }
  }, [départements, rowIndexes, toast]);
Retour (reste du code de l'interface utilisateur ici.... )

Answer 1

À la fin de votre fonction de gestionnaire de suppression, vous devez définir rowIndexes sur un tableau vide.

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