react-table在next.js中的渲染有问题

Question

试图将一个基本的表函数导入到我的下一个应用程序中。由于某些原因，它无法加载到索引中，尽管它是一个示例输出，应该真的可以工作！它正在返回一个渲染错误，如这里所示。

// Layouts
import Layout from "../components/Layout/Layout";
// import Table from "../components/Visualization/Table";
import ReactTable from "react-table";   



export default function LandingPage() {


  
  return (
    <Layout>

      <div className="container mx-auto pt-32">
        <h1>
          Gödel!
        </h1>
        <div>REAL-ESTATE PRESCIENCE - THE BEST INVESTMENT YOU'VE EVER MADE.</div>
        <ReactTable  
                  data=  {[{  
                    name: 'Ayaan',  
                    age: 26  
                    },{  
                     name: 'Ahana',  
                     age: 22  
                     },{  
                     name: 'Peter',  
                     age: 40      
                     },{  
                     name: 'Virat',  
                     age: 30  
                     },{  
                     name: 'Rohit',  
                     age: 32  
                     },{  
                     name: 'Dhoni',  
                     age: 37  
                     }]}
                  columns={[{  
                    Header: 'Name',  
                    accessor: 'name'  
                    },{  
                    Header: 'Age',  
                    accessor: 'age'  
                    }]  } 
                  defaultPageSize = {2}  
                  pageSizeOptions = {[2,4, 6]}  
              />  
        
       
        </div>

    </Layout>



  )
}

它正在返回一个渲染错误，如这里所示。

它返回的是这样的错误

index.js:1 The above error occurred in the <div> component:
    in div (at Table.js:33)
    in Table (at pages/index.tsx:157)
    in div (at pages/index.tsx:153)
    in div (at pages/index.tsx:132)
    in div (at pages/index.tsx:128)
    in div (at Layout.js:21)
    in div (at Layout.js:14)
    in Layout (at pages/index.tsx:127)
    in index (at _app.js:8)
    in MyApp
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, MyApp.
console.<computed> @ index.js:1
r @ react_devtools_backend.js:6
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
callback @ react-dom.development.js:20744
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19858
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
hydrate @ react-dom.development.js:24823
renderReactElement @ index.js:39
doRender$ @ index.js:45
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
doRender @ index.js:41
render$ @ index.js:26
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
render @ index.js:26
(anonymous) @ next-dev.js:9
(anonymous) @ fouc.js:4
requestAnimationFrame (async)
displayContent @ fouc.js:4
(anonymous) @ next-dev.js:9
Promise.then (async)
(anonymous) @ next-dev.js:7
./node_modules/next/dist/client/next-dev.js @ next-dev.js:11
__webpack_require__ @ bootstrap:855
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1590030597138:1
Show 21 more frames
_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.

Check the render method of `Table`.
    at createFiberFromTypeAndProps (react-dom.development.js:23965)
    at createFiberFromElement (react-dom.development.js:23988)
    at reconcileSingleElement (react-dom.development.js:14233)
    at reconcileChildFibers (react-dom.development.js:14293)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.hydrate (react-dom.development.js:24823)
    at renderReactElement (index.js:39)
    at doRender$ (index.js:45)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)
    at doRender (index.js:41)
    at render$ (index.js:26)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:274)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:219)
    at render (index.js:26)
    at next-dev.js:9
    at fouc.js:4
createFiberFromTypeAndProps @ react-dom.development.js:23965
createFiberFromElement @ react-dom.development.js:23988
reconcileSingleElement @ react-dom.development.js:14233
reconcileChildFibers @ react-dom.development.js:14293
reconcileChildren @ react-dom.development.js:16762
updateHostComponent @ react-dom.development.js:17302
beginWork @ react-dom.development.js:18627
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
hydrate @ react-dom.development.js:24823
renderReactElement @ index.js:39
doRender$ @ index.js:45
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
doRender @ index.js:41
render$ @ index.js:26
tryCatch @ runtime.js:45
invoke @ runtime.js:274
prototype.<computed> @ runtime.js:97
tryCatch @ runtime.js:45
invoke @ runtime.js:135
(anonymous) @ runtime.js:170
callInvokeWithMethodAndArg @ runtime.js:169
enqueue @ runtime.js:192
prototype.<computed> @ runtime.js:97
push../node_modules/regenerator-runtime/runtime.js.exports.async @ runtime.js:219
render @ index.js:26
(anonymous) @ next-dev.js:9
(anonymous) @ fouc.js:4
requestAnimationFrame (async)
displayContent @ fouc.js:4
(anonymous) @ next-dev.js:9
Promise.then (async)
(anonymous) @ next-dev.js:7
./node_modules/next/dist/client/next-dev.js @ next-dev.js:11
__webpack_require__ @ bootstrap:855
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js?ts=1590030597138:1
Show 17 more frames
index.js:1 The above error occurred in the <MyApp> component:
    in MyApp
    in Container (created by AppContainer)
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Container.

我很想在这里得到正确的指导 - > 非常困惑为什么它不会工作，因为该组件看起来在它的逻辑中非常直接。

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

更新

在为react-table实现typecript类型后，我得到这个错误。

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

这里是沙盘

https:/codesandbox.iosmystifying-monad-ulg5v?file=pagesindex.js。

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} />;
}