javascript - 反应表列不显示数据

Question

我正在使用 React Table 并且我试图让我的表格可点击以链接到不同的页面以获取到达行。但是现在我没有错误屏幕，我的列没有显示任何行的任何数据。

（当我拿走

 Cell: (props) =>
        linkTo(`ticket/[id]`, props.ticket_title, `ticket/${props.ticket_id}`),

一切恢复正常）

这是我的专栏文件：

import { linkTo } from '../utils/linkTo';
import { tableFormatted } from '../utils/tableFormatted';

export const TICKET_COLUMNS = [
    {
        Header: 'Ticket Number',
        accessor: 'ticket_id',
    },
    {
        Header: 'Title',
        accessor: (d) => `${d.ticket_title} ${d.ticket_id}`,
        Cell: (props) =>
            linkTo(`ticket/[id]`, props.ticket_title, `ticket/${props.ticket_id}`),
    },
    {
        Header: 'Description',
        accessor: 'ticket_text',
    },
    {
        Header: 'Priority',
        accessor: 'ticket_priority',
        Cell: (props) => tableFormatted(props.value),
    },
    {
        Header: 'Status',
        accessor: 'ticket_status',
        Cell: (props) => tableFormatted(props.value),
    },
    {
        Header: 'Type',
        accessor: 'ticket_type',
        Cell: (props) => tableFormatted(props.value),
    },
];

这是我用来尝试使单元格可点击的 linkTo 函数：

import { Link } from '@chakra-ui/layout';
import NextLink from 'next/link';

export const linkTo = (
    linkInput: string,
    children: string,
    asInput?: string
) => {
    if (asInput) {
        return (
            <>
                <NextLink href={linkInput} as={asInput}>
                    <Link>{children}</Link>
                </NextLink>
            </>
        );
    } else {
        return (
            <>
                <NextLink href={linkInput}>
                    <td>{children}</td>
                </NextLink>
            </>
        );
    }
};

这是桌子本身，虽然我不认为桌子是问题，但谁知道呢，肯定不是我哈哈。：

import React, { useMemo } from 'react';
import { Table } from 'react-bootstrap';
import { Column, useGlobalFilter, useTable } from 'react-table';
import { GlobalFilter } from './GlobalFilter';

type TestTableProps = {
    dataInput: any[];
    columnInput: any[];
    userInput?: any;
};

export const TestTable: React.FC<TestTableProps> = ({
    dataInput,
    columnInput,
    userInput,
}) => {
    const meData = userInput ? userInput : null;
    const isData = dataInput ? dataInput : [{}];

    const columns = useMemo<Column<object>[]>(() => columnInput, []);
    const data = useMemo(() => isData, [isData]);

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        state,
        setGlobalFilter,
    } = useTable(
        {
            columns,
            data,
        },
        useGlobalFilter
    );

    const { globalFilter } = state;

    if (!isData) {
        return <>no data</>;
    } else {
        return (
            <>
                <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
                <Table
                    {...getTableProps()}
                    striped
                    bordered
                    hover
                    responsive
                    variant="dark"
                >
                    <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>
            </>
        );
    }
};