NextUI 表示例失败 TypeError：无法读取未定义的属性（读取“key”）

Question

请帮忙解决这个错误。我对 React 框架很陌生。我对客户端和服务器端渲染有一些基本的了解。

我正在以下示例：https://nextui.org/docs/components/table 用例示例 创建表时，您通常需要排序、分页和过滤等核心功能。在下面的示例中，我们组合了所有这些功能来创建一个完整的表。

我的示例 fetch api 调用返回以下输出。

[{“id”：1， “名称”：“abc123”， "description": "这是一个例子", “测试”：60， “状态”：“活跃” }]

代码几乎相同，除了示例中将用户更改为 myusers 之外。我相信下面的行是罪魁祸首。

完整代码：https://pastebin.com/qNCvbZM0

    <TableBody emptyContent={"No users found"} items={sortedItems}>
           {(item) => (
             <TableRow key={item.id}>
               {(columnKey) => <TableCell>{renderCell(item, columnKey)}</TableCell>}
             </TableRow>
           )}
    </TableBody>

完全错误

⨯ node_modules/@react-stately/table/dist/import.mjs (724:66) @ key
 ⨯ Internal error: TypeError: Cannot read properties of undefined (reading 'key')
    at new $788781baa30117fa$export$596e1b2e2cf93690 (./node_modules/@react-stately/table/dist/import.mjs:731:67)
    at eval (./node_modules/@react-stately/table/dist/import.mjs:754:165)
    at eval (./node_modules/@react-stately/collections/dist/import.mjs:318:16)
    at Object.oL [as useMemo] (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:12:72820)
    at t.useMemo (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162746)
    at $7613b1592d41b092$export$6cd28814d92fa9c9 (./node_modules/@react-stately/collections/dist/import.mjs:312:65)
    at $4a0dd036d492cee4$export$907bcc6c48325fd6 (./node_modules/@react-stately/table/dist/import.mjs:754:96)
    at useTable (./node_modules/@nextui-org/table/dist/chunk-774VMS2G.mjs:31:86)
    at eval (./node_modules/@nextui-org/table/dist/chunk-MJZDDVZM.mjs:27:256)
    at as (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6505)
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:41191)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at av (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:7923)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13014
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:13038)
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:43088)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at aC (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:50165)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:38901
    at aw (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:39374)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46298)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at e (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46613)
    at ak (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:48276)
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54301
    at /workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54968
    at a$ (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:54976)
    at Timeout._onTimeout (/workspaces/nextjs_sample/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:4037)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

搜索了 google 和 stackoverflow。逐行检查代码。除了 return 语句之外，一切正常。

Answer 1

我对列也有同样的问题

<TableHeader columns={headerColumns}>
  {(column) => (
    <TableColumn
      key={column.uid}
      align={column.uid === "actions" ? "center" : "start"}
      allowsSorting={column.sortable}
    >
      {column.name}
    </TableColumn>
  )}
</TableHeader>

我想将一个空数组 [] 传递给 headerColumns 以查看它的行为，但它抛出了相同的错误。看来 TableHeader columns= 不处理错误！

我的解决方案是不使用 {(column) => ( 和 {(item) => (.

我是这样解决问题的：

<TableHeader>
  {headerColumns && headerColumns.length > 0 ? (
    headerColumns.map((column) => (
      <TableColumn
        key={column.uid || 0}
        align={column.uid === "actions" ? "center" : "start"}
        allowsSorting={column.sortable}
      >
        {column.name}
      </TableColumn>
    ))
  ) : (
    <TableColumn>Not found</TableColumn>
  )}
</TableHeader>
<TableBody emptyContent={"No users found"}>
  {sortedItems && sortedItems.length > 0 ? (
    sortedItems.map((item) => (
      <TableRow key={item.id || 0}>
        {(columnKey) => (
          <TableCell>{renderCell(item, columnKey)}</TableCell>
        )}
      </TableRow>
    ))
  ) : (
    <TableRow>
      <TableCell>Not found</TableCell>
    </TableRow>
  )}
</TableBody>

并且它工作正常，记住你可以更好地优化上面的代码以更有效地处理错误。