useState フックを使用して、複数の関数呼び出しにわたって永続的な値を維持します
P粉006540600
P粉006540600 2023-08-14 13:33:49
0
1
473
<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>
P粉006540600
P粉006540600

全員に返信(1)
P粉221046425

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート