reactjs - React 16.8.6 + react 数据表错误 TypeError: Object(...) is not a function
问题描述
我正在尝试使用 React Table 中的 Basic 表示例,但是当我运行应用程序时,需要加载表的服务器页面抛出错误 TypeError: Object(...) is not a function
我导入的顶级函数 <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}
To -> 从'react-table' 导入 { useTable }
推荐阅读
- d - 嗨,当我们右键单击文档并查看时,我需要包括属性在内的所有属性的结果
- reactjs - 创建从服务器获取数据的可编辑组件的正确方法?
- ios - App UI 将冻结 Firebase MLKit for iOS
- sql - 增加超集 sqllab 超时
- python - 为什么下面正文中的 python 绘图示例在似乎没有添加任何值时使用 subplot?
- docker - 在同一个 Docker 容器中部署单体和微服务
- python - 我正在尝试实施广度优先搜索
- python - How to convert a binary string into bipolar representation in python?
- shopify - Shopify 模版帮助 - 编辑“加入购物车”按钮
- c# - 在 C# 中从 String 转换为 BigInteger,而不切断前导零。