React-table 在 next.js 中渲染存在问题

Question

尝试将基本表函数导入到我的下一个应用程序中。由于某种原因，它不会加载到索引中，即使它是一个示例输出并且应该确实有效！

\n

// Layouts\nimport Layout from "../components/Layout/Layout";\n// import Table from "../components/Visualization/Table";\nimport ReactTable from "react-table";   \n\n\n\nexport default function LandingPage() {\n\n\n  \n  return (\n    <Layout>\n\n      <div className="container mx-auto pt-32">\n        <h1>\n          G\xc3\xb6del!\n        </h1>\n        <div>REAL-ESTATE PRESCIENCE - THE BEST INVESTMENT YOU\'VE EVER MADE.</div>\n        <ReactTable  \n                  data=  {[{  \n                    name: \'Ayaan\',  \n                    age: 26  \n                    },{  \n                     name: \'Ahana\',  \n                     age: 22  \n                     },{  \n                     name: \'Peter\',  \n                     age: 40      \n                     },{  \n                     name: \'Virat\',  \n                     age: 30  \n                     },{  \n                     name: \'Rohit\',  \n                     age: 32  \n                     },{  \n                     name: \'Dhoni\',  \n                     age: 37  \n                     }]}\n                  columns={[{  \n                    Header: \'Name\',  \n                    accessor: \'name\'  \n                    },{  \n                    Header: \'Age\',  \n                    accessor: \'age\'  \n                    }]  } \n                  defaultPageSize = {2}  \n                  pageSizeOptions = {[2,4, 6]}  \n              />  \n        \n       \n        </div>\n\n    </Layout>\n\n\n\n  )\n}\n

\n

它返回一个渲染错误，如下所示。

\n

它返回这种错误

\n

index.js:1 The above error occurred in the <div> component:\n    in div (at Table.js:33)\n    in Table (at pages/index.tsx:157)\n    in div (at pages/index.tsx:153)\n    in div (at pages/index.tsx:132)\n    in div (at pages/index.tsx:128)\n    in div (at Layout.js:21)\n    in div (at Layout.js:14)\n    in Layout (at pages/index.tsx:127)\n    in index (at _app.js:8)\n    in MyApp\n    in Container (created by AppContainer)\n    in AppContainer\n\nReact will try to recreate this component tree from scratch using the error boundary you provided, MyApp.\nconsole.<computed> @ index.js:1\nr @ react_devtools_backend.js:6\nlogCapturedError @ react-dom.development.js:19527\nlogError @ react-dom.development.js:19564\ncallback @ react-dom.development.js:20744\ncallCallback @ react-dom.development.js:12490\ncommitUpdateQueue @ react-dom.development.js:12511\ncommitLifeCycles @ react-dom.development.js:19858\ncommitLayoutEffects @ react-dom.development.js:22803\ncallCallback @ react-dom.development.js:188\ninvokeGuardedCallbackDev @ react-dom.development.js:237\ninvokeGuardedCallback @ react-dom.development.js:292\ncommitRootImpl @ react-dom.development.js:22541\nunstable_runWithPriority @ scheduler.development.js:653\nrunWithPriority$1 @ react-dom.development.js:11039\ncommitRoot @ react-dom.development.js:22381\nfinishSyncRender @ react-dom.development.js:21807\nperformSyncWorkOnRoot @ react-dom.development.js:21793\nscheduleUpdateOnFiber @ react-dom.development.js:21188\nupdateContainer @ react-dom.development.js:24373\n(anonymous) @ react-dom.development.js:24758\nunbatchedUpdates @ react-dom.development.js:21903\nlegacyRenderSubtreeIntoContainer @ react-dom.development.js:24757\nhydrate @ react-dom.development.js:24823\nrenderReactElement @ index.js:39\ndoRender$ @ index.js:45\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:274\nprototype.<computed> @ runtime.js:97\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:135\n(anonymous) @ runtime.js:170\ncallInvokeWithMethodAndArg @ runtime.js:169\nenqueue @ runtime.js:192\nprototype.<computed> @ runtime.js:97\npush../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219\ndoRender @ index.js:41\nrender$ @ index.js:26\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:274\nprototype.<computed> @ runtime.js:97\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:135\n(anonymous) @ runtime.js:170\ncallInvokeWithMethodAndArg @ runtime.js:169\nenqueue @ runtime.js:192\nprototype.<computed> @ runtime.js:97\npush../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219\nrender @ index.js:26\n(anonymous) @ next-dev.js:9\n(anonymous) @ fouc.js:4\nrequestAnimationFrame (async)\ndisplayContent @ fouc.js:4\n(anonymous) @ next-dev.js:9\nPromise.then (async)\n(anonymous) @ next-dev.js:7\n./node_modules/next/dist/client/next-dev.js @ next-dev.js:11\n__webpack_require__ @ bootstrap:855\ncheckDeferredModules @ bootstrap:45\nwebpackJsonpCallback @ bootstrap:32\n(anonymous) @ main.js?ts=1590030597138:1\nShow 21 more frames\n_app.js:7 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.\n\nCheck the render method of `Table`.\n    at createFiberFromTypeAndProps (react-dom.development.js:23965)\n    at createFiberFromElement (react-dom.development.js:23988)\n    at reconcileSingleElement (react-dom.development.js:14233)\n    at reconcileChildFibers (react-dom.development.js:14293)\n    at reconcileChildren (react-dom.development.js:16762)\n    at updateHostComponent (react-dom.development.js:17302)\n    at beginWork (react-dom.development.js:18627)\n    at HTMLUnknownElement.callCallback (react-dom.development.js:188)\n    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)\n    at invokeGuardedCallback (react-dom.development.js:292)\n    at beginWork$1 (react-dom.development.js:23203)\n    at performUnitOfWork (react-dom.development.js:22154)\n    at workLoopSync (react-dom.development.js:22130)\n    at performSyncWorkOnRoot (react-dom.development.js:21756)\n    at scheduleUpdateOnFiber (react-dom.development.js:21188)\n    at updateContainer (react-dom.development.js:24373)\n    at react-dom.development.js:24758\n    at unbatchedUpdates (react-dom.development.js:21903)\n    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)\n    at Object.hydrate (react-dom.development.js:24823)\n    at renderReactElement (index.js:39)\n    at doRender$ (index.js:45)\n    at tryCatch (runtime.js:45)\n    at Generator.invoke [as _invoke] (runtime.js:274)\n    at Generator.prototype.<computed> [as next] (runtime.js:97)\n    at tryCatch (runtime.js:45)\n    at invoke (runtime.js:135)\n    at runtime.js:170\n    at new Promise (<anonymous>)\n    at callInvokeWithMethodAndArg (runtime.js:169)\n    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)\n    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)\n    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)\n    at doRender (index.js:41)\n    at render$ (index.js:26)\n    at tryCatch (runtime.js:45)\n    at Generator.invoke [as _invoke] (runtime.js:274)\n    at Generator.prototype.<computed> [as next] (runtime.js:97)\n    at tryCatch (runtime.js:45)\n    at invoke (runtime.js:135)\n    at runtime.js:170\n    at new Promise (<anonymous>)\n    at callInvokeWithMethodAndArg (runtime.js:169)\n    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)\n    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)\n    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)\n    at render (index.js:26)\n    at next-dev.js:9\n    at fouc.js:4\ncreateFiberFromTypeAndProps @ react-dom.development.js:23965\ncreateFiberFromElement @ react-dom.development.js:23988\nreconcileSingleElement @ react-dom.development.js:14233\nreconcileChildFibers @ react-dom.development.js:14293\nreconcileChildren @ react-dom.development.js:16762\nupdateHostComponent @ react-dom.development.js:17302\nbeginWork @ react-dom.development.js:18627\ncallCallback @ react-dom.development.js:188\ninvokeGuardedCallbackDev @ react-dom.development.js:237\ninvokeGuardedCallback @ react-dom.development.js:292\nbeginWork$1 @ react-dom.development.js:23203\nperformUnitOfWork @ react-dom.development.js:22154\nworkLoopSync @ react-dom.development.js:22130\nperformSyncWorkOnRoot @ react-dom.development.js:21756\nscheduleUpdateOnFiber @ react-dom.development.js:21188\nupdateContainer @ react-dom.development.js:24373\n(anonymous) @ react-dom.development.js:24758\nunbatchedUpdates @ react-dom.development.js:21903\nlegacyRenderSubtreeIntoContainer @ react-dom.development.js:24757\nhydrate @ react-dom.development.js:24823\nrenderReactElement @ index.js:39\ndoRender$ @ index.js:45\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:274\nprototype.<computed> @ runtime.js:97\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:135\n(anonymous) @ runtime.js:170\ncallInvokeWithMethodAndArg @ runtime.js:169\nenqueue @ runtime.js:192\nprototype.<computed> @ runtime.js:97\npush../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219\ndoRender @ index.js:41\nrender$ @ index.js:26\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:274\nprototype.<computed> @ runtime.js:97\ntryCatch @ runtime.js:45\ninvoke @ runtime.js:135\n(anonymous) @ runtime.js:170\ncallInvokeWithMethodAndArg @ runtime.js:169\nenqueue @ runtime.js:192\nprototype.<computed> @ runtime.js:97\npush../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219\nrender @ index.js:26\n(anonymous) @ next-dev.js:9\n(anonymous) @ fouc.js:4\nrequestAnimationFrame (async)\ndisplayContent @ fouc.js:4\n(anonymous) @ next-dev.js:9\nPromise.then (async)\n(anonymous) @ next-dev.js:7\n./node_modules/next/dist/client/next-dev.js @ next-dev.js:11\n__webpack_require__ @ bootstrap:855\ncheckDeferredModules @ bootstrap:45\nwebpackJsonpCallback @ bootstrap:32\n(anonymous) @ main.js?ts=1590030597138:1\nShow 17 more frames\nindex.js:1 The above error occurred in the <MyApp> component:\n    in MyApp\n    in Container (created by AppContainer)\n    in AppContainer\n\nReact will try to recreate this component tree from scratch using the error boundary you provided, Container.\n

\n

我很乐意在这里指出正确的方向 - > 非常困惑为什么它不起作用，因为该组件的逻辑似乎非常简单。

\n

对尝试解决这个问题感到困惑 - 这与 next.js 的工作方式有关吗？

\n

更新

\n

在为反应表实现打字稿类型后，我得到了这个错误，

\n

JSX element type \'ReactTable\' does not have any construct or call signatures.\n    186 |             <Chart data={productList} />\n    187 |             <div>\n  > 188 |               <ReactTable\n        |                ^\n    189 |                 data={data}\n    190 |                 columns={columns}\n    191 |                 defaultPageSize={2}\n

\n

沙箱在这里

\n

https://codesandbox.io/s/mystifying-monad-ulg5v?file=/pages/index.js

\n

Answer 1

你没有react-table正确使用。我删除了不需要的东西。

import React from "react";
import { useTable } from "react-table";

function Table({ columns, 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, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default function index() {
  const data = React.useMemo(
    () => [
      {
        name: "Ayaan",
        age: 26
      },
      {
        name: "Ahana",
        age: 22
      },
      {
        name: "Peter",
        age: 40
      },
      {
        name: "Virat",
        age: 30
      },
      {
        name: "Rohit",
        age: 32
      },
      {
        name: "Dhoni",
        age: 37
      }
    ],
    []
  );

  const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        accessor: "name"
      },
      {
        Header: "Age",
        accessor: "age"
      }
    ],
    []
  );

  return <Table columns={columns} data={data} />;
}