React 16.8.6+React数据表错误TypeError:Object(..)不是函数



我正在尝试使用React table中的Basic表示例,但当我运行应用程序时,需要加载表的服务器页面抛出错误TypeError:Object(…(不是函数

导入<Table/>的顶级功能

import React from "react";
import { Table } from "../Components/Table/table.component"
export const Servers = () => {
return(
<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 | })

更改->从"React"导入React、{useTable、useMemo}

收件人->从"反应表"导入{useTable}

最新更新