访问表组件之外的选定行时，Tanstack/React-Table 无限循环

Question

您好，我正在使用 shadcn 表和 tanstack 表，在尝试访问 Table 组件外部的选定行时，出现无限循环错误，还有其他方法吗？除了使用 refs 和 onRowSelectionChange 方法

function TableComponent ({columns, data, paginationProps, setSelectedRows}){

const manualPagination = useMemo(() => !!paginationProps, [paginationProps]);
const [rowSelection, setRowSelection] = useState({});
const [pagination, setPagination] = useState({
  pageIndex: 0,
  pageSize: manualPagination ? paginationProps?.rowsPerPage || 0 : data.length,
});

const table = useReactTable({
  data,
  columns: columns,
  pageCount: manualPagination ? paginationProps?.totalPages : undefined,
  manualPagination,
  state: {
    rowSelection,
    pagination,
  },
  getRowId(originalRow: any) {
    return originalRow.id;
  },
  getCoreRowModel: getCoreRowModel(),
  onPaginationChange: (updater) => {
    setPagination(updater);
  },
  onRowSelectionChange: (updater) => {
    setRowSelection(updater);
  },
  getPaginationRowModel: getPaginationRowModel(),
});

const rows = table.getSelectedRowModel().rows;

useEffect(() => {
  console.log('Re Render') // Re-Renders Normal;
}, [rows])

// ! INFINITE LOOP
useEffect(() => {
  console.log('Re Render 2') // I get error of infinite loop
  setSelectedRows?.(rows.map((row) => row.original));
}, [rows]);

}

function ParentComponent (props){
const [selectedRows, setSelectedRows = useState ([])

useEffect(() =>{
  // do your custom handle of the selection
},[selectedRows])

return (
  <Table 
   columns={columns}
   data={data}
   setSelectedRows={setSelectedRows}>
  />
  ......
)
} 

我尝试使用 useRef 和 onPaginationChange 并且它有效，但 useref 不会检测到更改，并且 onPaginationChange 需要设置超时

Answer 1

您面临的问题与 rows 对象内存中的浅层比较有关。当您的状态更新时，行对象将在内存中具有不同的位置，从而重新触发效果。

另一种方法可能是将 setState 函数作为回调传递给 Table 组件

export default function Table({
  onRowSelect,
}) {
  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const table = useReactTable({
    state: {
      rowSelection,
    },
    onRowSelectionChange: setRowSelection,
  });

  useEffect(() => {
    if (onRowSelect) {
      const selected = table
        .getSelectedRowModel()
        .rows.map(({ original }) => original);

      onRowSelect(selected);
    }
  }, [onRowSelect, rowSelection, table]);
}

并通过将状态更新函数传递给

onRowSelect

来像这样使用它

const [selected, setSelected] = useState([])

<Table onRowSelect={setSelected} />