useState 후크를 사용하여 여러 함수 호출에서 지속적인 값을 유지합니다.

Question

테이블의 부서 행을 삭제하기 위해 버튼에서 "deleteDepartment" 함수를 호출하고 있습니다. "selectedRows" 후크에서 테이블(tanstack 테이블을 사용하여 shancn 테이블을 사용하고 있음)에서 선택한 행 인덱스를 가져옵니다(테이블의 rowSelection 후크에서 값을 가져오는 테이블 구성 요소에 setSelectedRows를 prop으로 전달).

문제는: 처음 두세 행은 문제 없이 삭제할 수 있지만 계속 삭제하면 "rowSelection" 상태가 이전 함수 호출의 값을 저장합니다. 및 변경사항 현재 선택된 행 배열에 추가됩니다.

예: 행['1']을 삭제하고 다음에 버튼을 클릭하여 행 2를 삭제하면 'rowSelection' 값은 그냥 ['2']여야 하는데, ['1', '2']처럼 이전 값에 추가됩니다.

왜 이런 현상이 발생하는지 알 수 없습니다. 클로저 및 비동기 특성 때문일 수 있다고 생각하여 useCallback 후크를 사용했지만 작동하지 않았습니다. 더 잘 아시는 분의 도움 부탁드립니다

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 코드는 여기에....)

Answer 1

삭제 핸들러 함수가 끝나면 rowIndexes를 빈 배열로 설정해야 합니다.

으아악