Gunakan cangkuk useState untuk mengekalkan nilai berterusan merentas pelbagai panggilan fungsi
P粉006540600
P粉006540600 2023-08-14 13:33:49
0
1
474
<p>Saya memanggil fungsi "deleteDepartment" pada butang untuk memadam baris jabatan dalam jadual. Dapatkan indeks baris yang dipilih daripada jadual (saya menggunakan jadual shancn menggunakan jadual tanstack) dalam cangkuk "selectedRows" (lulus setSelectedRows sebagai prop kepada komponen jadual yang mendapat nilai daripada cangkuk rowSelection dalam jadual). </p> <p><strong>Masalahnya ialah</strong>: Saya dapat memadamkan dua atau tiga baris pertama tanpa sebarang masalah, tetapi apabila saya meneruskan pemadaman, keadaan "rowSelection" menyimpan nilai daripada panggilan fungsi sebelumnya dan perubahan Ia ditambahkan pada tatasusunan baris yang sedang dipilih. </p> <p><em><strong>Contoh</strong></em>: Jika saya memadam baris['1'] dan kali seterusnya saya mengklik butang untuk memadam baris 2, maka nilai 'rowSelection' sepatutnya Hanya ['2'], tetapi ia ditambahkan pada nilai sebelumnya seperti ['1', '2']. </p> <p>Saya tersesat mengapa tingkah laku ini berlaku. Saya fikir ini mungkin disebabkan oleh penutupan dan sifat async, jadi saya menggunakan cangkuk useCallback, tetapi ia tidak berfungsi. Tolong bantu seseorang yang mempunyai pengetahuan yang lebih baik</p> <pre class="brush:php;toolbar:false;">const DepartmentsAndRolesPage = () => const [jabatan, setDepartments] = useState<departmentTypes[]>([]); const [selectedRows, setSelectedRows] = useState({}); const [rowIndexes, setRowIndexes] = useState<rentetan[]>([]); useEffect(() => { getDepartment(); }, []); useEffect(() => { const indexesToAdd = Object.keys(selectedRows); setRowIndexes(indexesToAdd); }, [Barisan yang dipilih]); const deleteDepartment = useCallback(async () => { if (rowIndexes.length === 0) { kembali; } if (rowIndexes.length === 1) { const filteredDepartment = departments[parseInt(rowIndexes[0])]; const id = filteredDepartment._id; respons const = tunggu axios.delete(`/api/department/delete/${id}`); if (response.statusText === "OK") { getDepartment(); setSelectedRows({}); } kembali; } if (rowIndexes.length > 1) { const departmentsToDelete = rowIndexes.map( (rowIndex) => jabatan[parseInt(rowIndex)]._id ); respons const = tunggu axios.post("/api/department/delete", { _id: departmentsToDelete, }); if (response.statusText === "OK") { getDepartment(); setSelectedRows({}); } kembali; } }, [jabatan, rowIndexes, roti bakar]); Kembali (selebihnya kod UI di sini.... )</pre> <p><br /></p>
P粉006540600
P粉006540600

membalas semua(1)
P粉221046425

Di penghujung fungsi pengendali padam anda, anda harus menetapkan rowIndexes kepada tatasusunan kosong.

const deleteDepartment = async () => {
   //你的函数代码...
   setRowIndexes([]);
   return;
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan