useState フックを使用して、複数の関数呼び出しにわたって永続的な値を維持します

Question

テーブル内の部門行を削除するために、ボタンで「deleteDepartment」関数を呼び出しています。 「selectedRows」フックでテーブル（私はtanstackテーブルを使用したshancnテーブルを使用しています）から選択された行インデックスを取得します（テーブルのrowSelectionフックから値を取得するテーブルコンポーネントにpropとしてsetSelectedRowsを渡します）。

問題は: 最初の 2 ～ 3 行は問題なく削除できますが、削除を続けると、「rowSelection」状態によって前の関数呼び出しの値が保存されます。現在選択されている行配列に追加されます。

例: row['1'] を削除し、次にボタンをクリックして行 2 を削除すると、「rowSelection」の値が['2'] だけである必要がありますが、['1', '2'] のように前の値に追加されます。

なぜこのような動作が発生するのかわかりません。これはクロージャと非同期の性質が原因である可能性があると考えたので、useCallback フックを使用しましたが、機能しませんでした。より詳しい知識のある人を助けてください

constDepartmentsAndRolesPage = () => {
  const [デパートメント、セットデパートメント] = useState<デパートメントタイプ[]>([]);
  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) {
      戻る;
    }

    if (rowIndexes.length === 1) {
      const filteredDepartment = 部門[parseInt(rowIndexes[0])];
      const id = filteredDepartment._id;
      const response = await axios.delete(`/api/Department/delete/${id}`);
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      戻る;
    }

    if (rowIndexes.length > 1) {
      const 部門ToDelete = rowIndexes.map(
        (rowIndex) => 部門[parseInt(rowIndex)]._id
      );
      const response = await axios.post("/api/Department/delete", {
        _id: 削除する部門、
      });
      if (response.statusText === "OK") {
        getDepartment();
        setSelectedRows({});
      }
      戻る;
    }
  }, [部門、行インデックス、トースト]);
Return (UI コードの残りの部分をここに....)

Answer 1

削除ハンドラー関数の最後で、rowIndexes を空の配列に設定する必要があります。

リーリー