数组映射始终不是一个函数

问：

我一直在摆弄数组并使用功能映射它们，老实说，我一直在为 ALOT 而苦苦挣扎，所以我希望有人可以分享一些关于这一点的信息。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>
  );
}

我在映射数组方面遇到了其他问题，但这是我最喜欢的问题，我总是失败一个idk为什么如此烦人。

提前致谢