以下行选择示例打破了 Material React Table(v3) 中的复选框

Question

遵循示例，但是一旦我更新了行

onRowSelectionChange: setRowSelection,

，单击复选框后就不会选中它们。 不确定是否是由于 rowSelection 未正确传回表而导致的重新渲染问题。

这与示例几乎完全相同，但当我单击复选框时，它们不会被选中。但如果我删除

onRowSelectionChange: setRowSelection

那么问题就会消失。

type TableProps<T extends MRT_RowData> = {
  tablePropsObj: MRT_TableOptions<T>;
};

const Table = <T extends MRT_RowData>(props: TableProps<T>) => {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });

  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
  
  const updatedTablePropsObj: MRT_TableOptions<T> = {
    enableColumnActions: false,
    enableRowSelection: true,
    enableSelectAll: true,
    enableTopToolbar: true,
    enableToolbarInternalActions: true,
    enableBottomToolbar: true,
    enablePagination: true,
    manualPagination: true,
    manualFiltering: true,
    positionPagination: 'bottom',
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    ...props.tablePropsObj,
    state: {
      pagination,
      rowSelection,
    },
  }
  const table = useMaterialReactTable(updatedTablePropsObj);
  return (
    <>
      <MaterialReactTable table={table} />
    </>
  );
};

Answer 1

看起来我遇到的问题是来自我传下来的桌子道具。我使用这个表格组件作为子组件，其他组件可以根据我想要显示的内容传递给它。

据我所知，传递下来的

propsTableObj

正在覆盖

onRowSelectionChange

和

RowSelection

状态。

type TableProps<T extends MRT_RowData> = {
  tablePropsObj: MRT_TableOptions<T>;
};

const Table = <T extends MRT_RowData>(props: TableProps<T>) => {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 10,
  });

  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
  
  const updatedTablePropsObj: MRT_TableOptions<T> = {
    enableColumnActions: false,
    enableRowSelection: true,
    enableSelectAll: true,
    enableTopToolbar: true,
    enableToolbarInternalActions: true,
    enableBottomToolbar: true,
    enablePagination: true,
    manualPagination: true,
    manualFiltering: true,
    positionPagination: 'bottom',
    ...props.tablePropsObj // Add this table props object here
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    state: {
      pagination,
      rowSelection,
      ...props.tablePropsObj.state // add this to get the remaining state
    },
  }
  const table = useMaterialReactTable(updatedTablePropsObj);
  return (
    <>
      <MaterialReactTable table={table} />
    </>
  );
};