如何解决react-table使用时报错TypeError: plugin is not a function

导致TypeError: plugin is not a function.的核心原因是useTable钩子的入参格式不符合react-table的要求：
react-table v7+的useTable第一个参数必须是配置对象，需要把columns和data作为配置对象的属性传入，你当前代码直接把columns、data作为两个独立参数传入，react-table会把第二个参数data识别为插件列表，遍历调用时就触发了plugin不是函数的报错。

你需要按以下步骤修正代码：

• 调整useTable的传参格式，将columns和data包裹在配置对象中
• 同步修正代码里的其他语法错误，避免后续运行报错：
  1. 导入React时拼写错误，Reactt改为React
  2. 表头th的属性方法调用错误，getHeaderGroups()改为getHeaderProps()
  3. 单元格渲染参数首字母需要大写，cell.render('cell')改为cell.render('Cell')
  4. 标签和属性展开语法之间缺少空格，比如<tr{...}>改为<tr {...}>

修复后的完整代码如下：

import React,{ useMemo } from 'react'
import { useTable } from "react-table";
import COLUMNS from "./columns";
import MOCK_DATA from '../MOCK_DATA.json'
import '../table.css'

const BasicTable = () => {
  const columns = useMemo(() => COLUMNS, []);
  const data = useMemo(() => MOCK_DATA, []);
  // 核心修改：传配置对象而非分开传参
  const tableInstance = useTable({
    columns,
    data
  })
  const {getTableProps,getTableBodyProps,headerGroups,rows,prepareRow}= tableInstance
  return (
    <table {...getTableProps()}>
      <thead>
        {
          headerGroups.map((headerGroup)=>(
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map((column)=>(
                <th {...column.getHeaderProps()}>{column.render('Header')}</th>
              ))} 
            </tr>
          ))
        }
      </thead>
      <tbody {...getTableBodyProps()}>
        {
          rows.map((row)=>{
            prepareRow(row)
            return(
              <tr {...row.getRowProps()}>
                {row.cells.map((cell)=>{
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })
        }
      </tbody>
    </table>
  )
}

export default BasicTable

内容的提问来源于stack exchange，提问作者Hussein Korongo