<p>테이블의 부서 행을 삭제하기 위해 버튼에서 "deleteDepartment" 함수를 호출하고 있습니다. "selectedRows" 후크에서 테이블(tanstack 테이블을 사용하여 shancn 테이블을 사용하고 있음)에서 선택한 행 인덱스를 가져옵니다(테이블의 rowSelection 후크에서 값을 가져오는 테이블 구성 요소에 setSelectedRows를 prop으로 전달). </p> <p><strong>문제는</strong>: 처음 두세 행은 문제 없이 삭제할 수 있지만 계속 삭제하면 "rowSelection" 상태가 이전 함수 호출의 값을 저장합니다. 및 변경사항 현재 선택된 행 배열에 추가됩니다. </p> <p><em><strong>예</strong></em>: 행['1']을 삭제하고 다음에 버튼을 클릭하여 행 2를 삭제하면 'rowSelection' 값은 그냥 ['2']여야 하는데, ['1', '2']처럼 이전 값에 추가됩니다. </p> <p>왜 이런 현상이 발생하는지 알 수 없습니다. 클로저 및 비동기 특성 때문일 수 있다고 생각하여 useCallback 후크를 사용했지만 작동하지 않았습니다. 더 잘 아시는 분의 도움 부탁드립니다</p> <pre class="brush:php;toolbar:false;">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(indexesToAdd); }, [선택된 행]); const deleteDepartment = useCallback(async () => { if (rowIndexes.length === 0) { 반품; } if (rowIndexes.length === 1) { constfilteredDepartment = 부서[parseInt(rowIndexes[0])]; const id = 필터링된Department._id; const 응답 = axios.delete(`/api/department/delete/${id}`)를 기다립니다. if (response.statusText === "확인") { getDepartment(); setSelectedRows({}); } 반품; } if (rowIndexes.length > 1) { const DepartmentsToDelete = rowIndexes.map( (rowIndex) => 부서[parseInt(rowIndex)]._id ); const 응답 = axios.post("/api/department/delete", {를 기다립니다. _id: 부서삭제, }); if (response.statusText === "확인") { getDepartment(); setSelectedRows({}); } 반품; } }, [부서, rowIndexes, 토스트]); Return (나머지 UI 코드는 여기에....)</pre> <p><br /></p>