How do i fix "Error: A column ID (or string accessor) is required!" in Nextjs..........[react-table]

Question

(https://i.stack.imgur.com/wnjIP.png) 我尝试按照（子组件）上的 react-table 文档中的步骤进行操作，即使我使用了基本的 table 实现

，我也遇到了同样的错误

我的data.json是这样的

{
    "orderId": 1345123,
    "restName": "Burger House NYC",
    "restAddr": "First Street, New York",
    "clientAddr": "32nd St, New York",
    " quantity": 2
},

和专栏

const COLUMNS = [
    {
        Header: "Ordered ID",
        accessor: "orderId",
    },
    {
        Header: "Restaurant's name",
        accessor: "restName",
    },
    {
        Header: "Restaurant's address",
        accessor: "restAddr",
    },
    {
        Header: "Client's address",
        accessor: "clientAddr",
    },
    {
        Header: "Quantity",
        accessor: "quantity",
    },
];

这就是Table。 jsx 文件看起来像

import React, { useMemo } from "react";
import { useTable, useExpanded } from "react-table";
import ALLAVAILABLEDELIVRIES from 
"utils/data/ALLAVAILABLEDELIVRIES.json";
import COLUMNS from "./columns";

export const Table = () => {
    const columns = useMemo(() => COLUMNS, []);
    const dataList = useMemo(() => ALLAVAILABLEDELIVRIES, []);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, visibleColumns } =
    useTable(
        {
            columns,
            dataList,
        },
        useExpanded,
    );

// Create a function that will render our row sub components
const renderRowSubComponent = React.useCallback(
    ({ row }) => (
        <pre
            style={{
                fontSize: "10px",
            }}
        >
            <code>{JSON.stringify({ values: row.values }, null, 2)}</code>
        </pre>
    ),
    [],
);

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, i) => {
                prepareRow(row);
                return (
                    // Use a React.Fragment here so the table markup is still valid
                    <React.Fragment {...row.getRowProps()}>
                        <tr>
                            {row.cells.map((cell) => (
                                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                            ))}
                        </tr>
                        {row.isExpanded ? (
                            <tr>
                                <td colSpan={visibleColumns.length}>
                                    {renderRowSubComponent({ row })}
                                </td>
                            </tr>
                        ) : null}
                    </React.Fragment>
                );
            })}
        </tbody>
    </table>
);

};

导出默认值 Table；

请问有什么可以做的吗，或者我在这里做错了什么

Answer 1

我的错，错误来自于我，(dataList) 我不得不改变这个

const columns = useMemo(() => COLUMNS, []);
const dataList = useMemo(() => ALLAVAILABLEDELIVRIES, []);

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, visibleColumns } =
useTable(
    {
        columns,
        dataList,
    },
    useExpanded,
);

到这个

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

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

How do i fix "Error: A column ID (or string accessor) is required!" in Nextjs..........[react-table]

How do i fix "Error: A column ID (or string accessor) is required!" in Nextjs..........[react-table]

reactjs

next.js

react-table