react-table 在 next.js 中出现渲染问题答案

【问题标题】：react-table has a issue with rendering in next.jsreact-table 在 next.js 中出现渲染问题
【发布时间】：2020-06-28 10:18:03
【问题描述】：

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

// 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 实现 typescript 类型后，我得到了这个错误，

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.io/s/mystifying-monad-ulg5v?file=/pages/index.js

【问题讨论】：

afaik 简单示例看起来像 codesandbox.io/embed/github/tannerlinsley/react-table/tree/… 并且我无处可以看到您的钩子代码。不确定您是否使用的是无状态的 react-table v7？但我设法让它与 next.js 一起工作，我已经完成了与简单示例完全一样的操作
你能分享代码吗？我也在使用打字稿，也许这是问题所在？
与简单示例的代码相同。这是一个私人仓库，所以不能分享我的代码，但你可以分享你的。我仍然看不到上面代码中的钩子在哪里，所以至少缺少一些东西
@deadcoder0904 仍然无法正常工作。我不得不假设这与 react-table 如何与 next.js 一起使用
你使用react-table v7 & 它与 v6 非常不同。它有钩子API。检查简单的示例并相应地编辑您的代码。它在带有打字稿的 next.js 中为我工作，所以是的，它没有任何问题。这是你的代码。

标签： javascript reactjs typescript next.js react-table

【解决方案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} />;
}

【讨论】：

好东西！如果我想传递我的数据和列，使用它作为一个组件，我将如何处理它的任何线索？
干杯 - 我解决了问题所在，感谢您的帮助
嗨@deadcoder0904，我无法访问代码框链接Request failed with status code 404。请检查并帮助，谢谢。
@PennyLiu 我可能已经删除了它。您只需将代码复制并粘贴到新的 React 沙箱中即可使其正常工作。您必须安装 react-table 作为依赖项，但它应该可以工作。如果您仍然无法弄清楚，请查看 React Table 的简单示例并将该示例替换为上面的代码:)