反应表不显示的单元数据
我的数据在反应表的单元格内不可见:
import React, { useMemo } from 'react'
import { useTable } from 'react-table/dist/react-table.development'
import MOCK_DATA from '../mock/components/LandingTableMock.json'
import { COLUMNS } from './LandingTableColumns'
import '../static/styles/globalVar.css'
export const LandingTable = () => {
const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => MOCK_DATA, [])
const tableInstance = useTable ({
columns: columns, //columns: COLUMNS,
data //data: MOCK_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>
)
}
MOCK_DATA和列看起来不错,这不是包括问题。我将它们移到同一文件中,但仍然无法使用。
结果是一个表格,有一个正确的行数但空单元格:
< img src =“ https://i.sstatic.net/1qezj.png” alt =“在此处输入图像说明”>
我关注教程。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论