useState フックを使用して、複数の関数呼び出しにわたって永続的な値を維持します
P粉006540600
2023-08-14 13:33:49
<p>テーブル内の部門行を削除するために、ボタンで「deleteDepartment」関数を呼び出しています。 「selectedRows」フックでテーブル(私はtanstackテーブルを使用したshancnテーブルを使用しています)から選択された行インデックスを取得します(テーブルのrowSelectionフックから値を取得するテーブルコンポーネントにpropとしてsetSelectedRowsを渡します)。 </p>
<p><strong>問題は</strong>: 最初の 2 ~ 3 行は問題なく削除できますが、削除を続けると、「rowSelection」状態によって前の関数呼び出しの値が保存されます。現在選択されている行配列に追加されます。 </p>
<p><em><strong>例</strong></em>: row['1'] を削除し、次にボタンをクリックして行 2 を削除すると、「rowSelection」の値が['2'] だけである必要がありますが、['1', '2'] のように前の値に追加されます。 </p>
<p>なぜこのような動作が発生するのかわかりません。これはクロージャと非同期の性質が原因である可能性があると考えたので、useCallback フックを使用しましたが、機能しませんでした。より詳しい知識のある人を助けてください</p>
<pre class="brush:php;toolbar:false;">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 コードの残りの部分をここに....)</pre>
<p><br /></p>
削除ハンドラー関数の最後で、
リーリーrowIndexes
を空の配列に設定する必要があります。