React 16.8.6 + react data table error TypeError: Object(...) is not a function

Question

我正在尝试使用来自 React Table 的基本 table 示例，但是当我运行应用程序时， table 需要的服务器页面加载时抛出错误 TypeError: Object(...) is not a function

我导入的顶级函数 <Table/>

import React from "react";
import { Table } from "../Components/Table/table.component"

export const Servers = () => {

return(
  <Table/>
   )
 }

Table分量

import React, {useTable, useMemo} from 'react'
import django_data from '../../django_data.json'
import { COLUMNS }   from "./../../colums";



export const Table = () => {

  const columns = useMemo(() => COLUMNS, [])
  const data = useMemo(() => django_data, [])

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

  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  const COLUMNS =  [
{
  Header: 'Server Name',
  assesor: 'name',
},
{
  Header: 'OS Version',
  assesor: 'os_release',
},

{
  Header: 'Kernel Version',
  assesor: 'kernel_version',
  
},

{
  Header: 'Minion Status',
  assesor: 'minion_status',
  
},
]

django_data.json

[
{
    "id":"CEB4FD81E47A01F6AF51E4115B9A6514",
    "url": "http://example.com/api/v1/servers/9689/",
    "name": "example",
    "fqdn": "example.com",
    "os_type": "Linux",
    "status": "In Service",
    "os_release": "Suse 11.4",
    "uptime": "4d:13h:31m:56s",
    "kernel_version": "3.0.101-108.117-default",
    "target_kernel_version": null,
    "minion_status": "Up",      
},

页面中显示的错误跟踪。

     9 | const columns = useMemo(() => COLUMNS, [])
    10 | const data = useMemo(() => django_data, [])
    11 | 
  > 12 | const tableInstance = useTable({
    13 |   columns,
    14 |   data
    15 | })

Answer 1

更改 -> 从 'react'

导入 React，{~~useTable~~，useMemo}

至 -> 从 'react-table'

导入 { useTable }

React 16.8.6 + react data table error TypeError: Object(...) is not a function

React 16.8.6 + react data table error TypeError: Object(...) is not a function

reactjs

react-table

react-hooks