数组映射永远不是函数

我一直在摆弄数组并使用Array.prototype.map()函数映射它们，老实说我一直在努力，所以我希望有人可以分享一些关于这方面的信息。

所以我的目标很简单，在我的自定义组件中映射表中的一些标题和行，但是当我开始进行映射时，它总是说"variable.map() is not a function"事件我指定了它的一个数组，并且它有我从我的页面传递的值。我已经测试过它是否是因为它是空的，但似乎不是那样。

我的页面现在就是这样。

import AppLayout from '../../../components/AppLayout';
import Table from '../../../components/modules/Table';

export default function Products() {
  return (
    <AppLayout>
      <section className="content">
        <h3 className="text-3xl font-bold">Products</h3>
        <Table
          headings={[
            '',
            'Product',
            'Status',
            'Type',
          ]}
        />
      </section>
    </AppLayout>
  );
}

至于我的桌子：

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>
  );
}

我在映射数组方面遇到了其他问题，但这是我总是失败的最严重的问题，我不知道为什么这么烦人。

提前致谢