React自定义Table组件调用Array.map时报错map不是函数如何解决

问题根因 #

你遇到的headings.map is not a function报错，核心原因是React函数组件的参数接收逻辑错误：
React所有函数组件的第一个入参永远是聚合了所有传入属性的props对象，你直接把headings、rows作为函数的两个独立参数声明，此时拿到的headings实际上是整个props对象（结构为{headings: [...], rows: ...}），对象本身没有map方法，自然会触发报错。

修复方案 #

修改你的自定义Table组件的参数接收逻辑，改为从props中解构属性即可，修改后代码如下：

export default function Table({ headings = [], rows = [] }) {
  const top = headings.map((value) => (
    <th
      key={value}
      scope="col"
      className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
    >
      {value}
    </th>
  ));

  return (
    <div className="flex flex-col">
      <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
          <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
            <table className="min-w-full divide-y divide-gray-200">
              <thead className="bg-gray-50">
                {top}
              </thead>
              <tbody>
                {rows}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

额外调整了rows的默认值为空数组，符合行数据的常规类型，避免后续你传入rows时出现同类map报错。

同类报错通用排查思路 #

之后再遇到xxx.map is not a function的报错，可按以下步骤快速定位：

• 打印调用map的变量，确认其实际类型是不是数组，常见的错误场景是拿到了对象、undefined、null等值
• 如果是组件传参场景，优先确认props接收逻辑是否正确，不要把属性名直接作为函数的独立参数
• 可以用可选链语法xxx?.map()兜底，避免异常报错阻断整个页面渲染

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