react-table中setSortBy使用报错：setSortBy is not a function

问题根源 #

你没有在useTable中启用排序插件useSortBy，React Table只有在加载对应插件后，才会暴露setSortBy这类排序相关方法。

修复步骤 #

1. 导入useSortBy插件
   确保代码中导入React Table的useSortBy：

import { useTable, useSortBy } from 'react-table';

2. 在useTable中添加useSortBy插件
   修改useTable调用，把useSortBy加入插件列表：

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  setSortBy, // 现在可正常解构
} = useTable(
  {
    columns,
    data,
    defaultColumn,
    initialState: { pageIndex: 0 },
  },
  usePagination,
  useBlockLayout,
  useResizeColumns,
  useSortBy // 新增该行
);

3. 验证列配置
   确保columns数组中每个列对象有唯一id（或accessor，React Table会自动将accessor作为id使用），示例：

const columns = [
  {
    id: 'name', // 必须有唯一id
    Header: '姓名',
    accessor: 'userName',
  },
  // 其他列配置...
];

4. 确认调用逻辑
   你的点击事件逻辑本身无问题，只需保证column.id与列配置中的id对应即可：

<span onClick={() => setSortBy([{ id: column.id, desc: false }])}>🔼</span>
<span onClick={() => setSortBy([{ id: column.id, desc: true }])}>🔽</span>

内容的提问来源于stack exchange，提问作者Mahammad Mansurali