使用react-table开发DataTable组件报解构非可迭代实例错误如何解决？

问题根因 #

错误并非出在你标记的let tableColumns: HeaderColumn<any>[] = columns;行，问题根源是useTable返回值的state解构逻辑错误：
你当前的代码写法为：

const {
  getTableProps,
  headerGroups,
  rows,
  prepareRow,
  state: [{ selectedRows }], // 错误点在这里
} = useTable({ columns: tableColumns, data }, useRowSelect);

react-table的state是普通对象类型，不是数组，你用数组的解构语法去解构非数组的对象实例，就会抛出「尝试解构非可迭代实例」的报错。

修复方案 #

1. 修正state解构语法 #

把数组解构改为对象解构即可，selectedRows是useRowSelect插件注入的state属性，直接从state对象中取值：

const {
  getTableProps,
  headerGroups,
  rows,
  prepareRow,
  state: { selectedRows }, // 把外层的[]替换为{}
} = useTable({ columns: tableColumns, data }, useRowSelect);

2. 修正无效的useMemo逻辑 #

你当前的useMemo没有将计算结果赋值给变量，属于完全没有作用的冗余代码，可以调整为：

// 移除之前的let tableColumns声明行，改用useMemo返回值作为tableColumns
const tableColumns = useMemo(() => columns, [rowSelection, columns]);

如果没有动态修改列配置的需求，也可以直接删掉这个useMemo，直接把props传入的columns传给useTable即可。

跨项目差异说明 #

另一个项目没有报错的核心原因大概率是两个项目的react-table版本不一致，或者你在另一个项目中的state解构写法是正确的，当前项目拷贝代码时误把对象解构写成了数组解构。

内容的提问来源于stack exchange，提问作者Abraham Izadi