无效的钩子调用反应钩子，使用 react-table 尝试显示一些模拟 json，我不明白出了什么问题

Question

本周末试图获得一个正常运行的反应表，非常沮丧。 我已经将我的项目剥离到调试正在发生的事情的绝对基础上，我只是不明白为什么这是一个无效的钩子，有没有办法我可以获得关于具体错误的更好信息，或者我没有阅读错误正确吗？ 下面运行时出错，我的所有代码都在底部：

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

(happens twice in console): 
react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)

react-dom.development.js:18687 The above error occurred in the <PopulateTable> component:

    at PopulateTable (http://localhost:3000/static/js/bundle.js:122:65)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at useTable (useTable.js:65:1)
    at PopulateTable (PopulateTable.js:12:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

我有一个功能组件 PopulateTable.js：

import React, { useMemo } from 'react'
import { useTable } from 'react-table'
import DATA from './data.json'
import { COLUMNS } from './columns'



export const PopulateTable = () => {

    const columns = useMemo(() => COLUMNS, [])
    const data = useMemo(() => DATA, [])
    const tableInstance = useTable({ 
        columns,
        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>
    )
};

我的App.js

import './App.css';
import React, { useState, useRef, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import { PopulateTable } from './Component/PopulateTable';


function App() {
  
  return(
    <div>
         <PopulateTable />
    </div>
  )
}

export default App;

数据.json ：

[
        {
            "1": {
                "itemName": "Energy research",
                "profitPerHour": 821.6746356364301
            },
            "2": {
                "itemName": "Mining research",
                "profitPerHour": 742.7240922619478
            },
            "3": {
                "itemName": "Electronics research",
                "profitPerHour": 864.3855853308221
            }
        }
]

最后是 columns.js ：

export const COLUMNS = [
        {
            Header: "Item Name",
            accessor: "itemName" 
        },
        {
            Header: "Profit Per Hour",
            accessor: "profitPerHour"
        }
]

我到底做错了什么，请所有强大的堆栈溢出之神，我按照错误中的链接进行操作。 我不相信我违反了任何规则，因为在功能组件中 #1 或 #2 必须在 function 顶部有钩子。我按照本教程了解 T 的结构和许多非常相似的...我按照说明查看两个反应版本是否冲突，从项目文件夹运行 npm ls react。 像我期望的那样返回一个版本的 react 和一个版本的 react-table。 这只是我正在进行的项目的终点线，我想我肯定会在周末结束之前完成它，看起来不像。 但如果你知道这里发生了什么，那就太好了。

└─┬ react-table@7.8.0
  └── react@18.2.0

Answer 1

在这里，我们不能直接使用data.json 。 我们必须将其转换为对象数组：

  const data = useMemo(() => {
    const rawData = DATA[0];
    return Object.keys(rawData).map((key) => rawData[key]);
  }, []);

这是示例：