React-Table接收Props传参报错：Cannot read properties of undefined (reading 'map')

在使用React-Table时，从页面组件向BasicTable组件传递columns和data作为props时触发错误：Cannot read properties of undefined (reading 'map')，但直接在BasicTable组件内导入数据和列配置就能正常渲染，需解决如何正确传递props完成渲染。

问题根源 #

核心问题是组件接收的props名称与父组件传递的不匹配：

• 父组件传递的props是columns和data
• BasicTable组件里解构的却是COLUMNS和MOCK_DATA，导致这两个变量始终为undefined，React-Table无法获取有效配置，最终执行map操作时抛出错误

修复步骤 #

1. 修正组件的Props解构名称 #

将BasicTable组件的props解构改为和父组件传递一致的名称：

// 原错误写法
export const BasicTable = ({COLUMNS, MOCK_DATA}) => { ... }

// 修正后写法
export const BasicTable = ({columns, data}) => { ... }

2. 更新useMemo的依赖与返回值 #

同步修改useMemo中引用的变量，确保使用正确的props值：

// 原错误写法
const columns = useMemo(() => COLUMNS, []);
const data  = useMemo(() => MOCK_DATA, []);

// 修正后写法
const tableColumns = useMemo(() => columns, [columns]);
const tableData  = useMemo(() => data, [data]);

注：将变量名改为tableColumns和tableData是为了避免与props重名，也可直接沿用原名称，确保逻辑清晰即可

3. （可选）添加默认Props #

为避免父组件未传递props时再次报错，可给组件设置默认props：

BasicTable.defaultProps = {
  columns: [],
  data: []
};

修正后的完整BasicTable组件代码 #

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

export const BasicTable = ({columns, data}) => {
    // 用useMemo缓存列和数据，依赖项设为传入的props
    const tableColumns = useMemo(() => columns, [columns]);
    const tableData  = useMemo(() => data, [data]);

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
        useTable({
          columns: tableColumns,
          data: tableData,
        });

    return (
        <table
            {...getTableProps()}
            className="table table-hover table-bordered"
        >
            <thead>
                {headerGroups.map((headerGroup) => (
                    <tr
                        {...headerGroup.getHeaderGroupProps()}
                        className="text-center"
                    >
                        {headerGroup.headers.map((col) => (
                            <th {...col.getHeaderProps()}>
                                {col.render("Header")}
                            </th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row) => {
                    prepareRow(row);
                    return (
                        <tr {...row.getRowProps()} className="text-center">
                            {row.cells.map((cell) => {
                                return (
                                    <td {...cell.getCellProps()}>
                                        {cell.render("Cell")}
                                    </td>
                                );
                            })}
                        </tr>
                    );
                })}
            </tbody>
        </table>
    );
};

// 添加默认props，增强鲁棒性
BasicTable.defaultProps = {
  columns: [],
  data: []
};

父组件页面代码（无需修改） #

import MOCK_DATA from "../Components/Tables/ExpensesIndexTable/Mock data/MOCK_DATA.json";
import { COLUMNS } from "../Components/Tables/ExpensesIndexTable/Columns/expenses_index_columns.js";
import { BasicTable } from '../路径/BasicTable'; // 确保导入路径正确

export const Index = () => {
    return (
        <div className="table-responsive-md">
           <BasicTable columns={COLUMNS} data={MOCK_DATA}/>
        </div>
    );
};

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