Material React Table(v3)遵循行选择示例致复选框失效

按照Material React Table的行选择示例实现后，添加onRowSelectionChange: setRowSelection后点击复选框无法选中，移除该行代码则恢复正常，推测是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',
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    ...props.tablePropsObj,
    state: {
      pagination,
      rowSelection,
    },
  }
  const table = useMaterialReactTable(updatedTablePropsObj);
  return (
    <>
      <MaterialReactTable table={table} />
    </>
  );
};

问题根源在于对象展开的顺序错误：...props.tablePropsObj放在了自定义配置之后，导致传入的tablePropsObj会覆盖你后续定义的state、onRowSelectionChange等关键配置。

调整对象展开顺序，把...props.tablePropsObj放在最前面，再覆盖自定义的配置项，这样你的状态和回调不会被外部传入的属性覆盖：

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> = {
    //先展开外部传入的属性
    ...props.tablePropsObj,
    //再定义自定义配置，覆盖外部传入的同名属性
    enableColumnActions: false,
    enableRowSelection: true,
    enableSelectAll: true,
    enableTopToolbar: true,
    enableToolbarInternalActions: true,
    enableBottomToolbar: true,
    enablePagination: true,
    manualPagination: true,
    manualFiltering: true,
    positionPagination: 'bottom',
    onPaginationChange: setPagination,
    onRowSelectionChange: setRowSelection,
    state: {
      pagination,
      rowSelection,
    },
  }
  const table = useMaterialReactTable(updatedTablePropsObj);
  return (
    <>
      <MaterialReactTable table={table} />
    </>
  );
};

这样修改后，rowSelection状态会正确绑定到表格，onRowSelectionChange也能正常更新状态，复选框选中功能即可恢复正常。

内容的提问来源于stack exchange，提问作者Justin tt