未捕获的 TypeError：无效的解构不可迭代实例的尝试

Question

我正在使用 react-table 制作一个 DataTable 组件。 这是我的组件的代码：

const DataTable: React.FC<IDataTable<any>> = (props: IDataTable<any>) => {
  const { columns, data, className, rowSelection, onChange, ...rest } = props;
  let tableColumns: HeaderColumn<any>[] = columns;
  useMemo(() => tableColumns, [rowSelection, columns]);
  const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ selectedRows }],
  } = useTable({ columns: tableColumns, data }, useRowSelect);
  useEffect(() => onChange && onChange(selectedRows), [selectedRows]);
  return (
    <table {...getTableProps()} className={`ods-data-table ${className}`} {...rest}>
      <thead>
        {headerGroups.map((headerGroup, index) => (
          <tr key={index}>
            {headerGroup.headers.map((column, index) => (
              <th key={index} {...column.getHeaderProps()}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
              <tr {...row.getRowProps()} tabIndex={i} key={i}>
                {row.cells.map((cell, i) => {
                  return (
                    <td {...cell.getCellProps()} key={i}>
                      {cell.render('Cell')}
                    </td>
                  );
                })}
              </tr>
            )
        )}
      </tbody>
    </table>
  );
};

当我尝试使用此组件并传递数据时，我收到此错误：
“未捕获的 TypeError：解构不可迭代实例的无效尝试。为了可迭代，非数组对象必须具有 Symbol.iterator 方法。”
这是我尝试将数据传递给 DataTable 组件的方式。

const tableColumns: HeaderColumn<any>[] = [
  {
    Header: 'sample text',
    accessor: (object) => object.title,
  },
  {
    Header: 'sample text',
    accessor: (object) => object.price,
  },
];

const tableData = [
    {
      title: 'title1',
      price: 'price1',
    },
    {
      title: 'title2',
      price: 'price2',
    },
    {
      title: 'title3',
      price: 'price3',
    },
  ];

<DataTable columns={tableColumns} data={tableData} />

控制台中的错误表明它在这一行的 DataTable 组件中（我不确定）：

let tableColumns: HeaderColumn<any>[] = columns;

我在另一个项目中使用确切的组件并传递相同的数据，但没有这样的错误。 我在stackoverflow中搜索并发现了相同的问题，但无法解决问题。 有人可以在这方面帮助我吗？
如果我的问题不完整或需要更多信息，请告诉我。

Answer 1

我找到了引发错误的代码行，我可以解决问题。
当我使用 react-table 钩子（useTable）时，在这一行中：

 const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: [{ selectedRows }],
  } = useTable({ columns: tableColumns, data }, useRowSelect);

我将数组更改为 object，问题就消失了。 这是最终代码：

 const {
    getTableProps,
    headerGroups,
    rows,
    prepareRow,
    state: { selectedRows },
  } = useTable({ columns: tableColumns, data }, useRowSelect);