react-table报错headerGroup.map is not a function 求助

报错原因 #

该错误由表头渲染段的写法错误直接导致：

• react-table返回的headerGroups是表头组数组，遍历得到的单个headerGroup为对象类型，本身不具备数组的map方法
• 每个表头组对应的列配置数组存放在headerGroup.headers属性下，原代码直接对headerGroup对象调用map，直接触发类型错误。

除此之外代码存在一处隐藏渲染问题：单元格渲染时cell.render("cell")的参数大小写不符合react-table的约定，即使修复map报错，单元格内容也无法正常渲染。

修复方案 #

columns.js的列配置没有问题，无需修改，只需要调整Tableee.js中的两处渲染逻辑即可，修正后的完整组件代码如下：

import React, { useMemo } from "react";
import { useTable } from "react-table";
import MOCK_DATA from "./MOCK_DATA.json";
import { COLUMNS } from "./columns";
import "./tableee.css";

const Tableee = () => {
  const columns = useMemo(() => COLUMNS, []);
  const data = useMemo(() => MOCK_DATA, []);
  const tableInstance = useTable({
    columns: columns,
    data: data,
  });
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = tableInstance;
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {/* 修正1：遍历headerGroup下的headers数组，而非直接遍历headerGroup对象 */}
            {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) => {
                {/* 修正2：render参数首字母大写，传入"Cell"匹配渲染规则 */}
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default Tableee;

替换上述代码后即可正常加载渲染表格。

内容的提问来源于stack exchange，提问作者Rakesh L