Javascript React JS：如何正确映射组件表行？

所以我创建了这个表组件，旨在可重用

但是我有一个问题，数据没有正确地填充所有的行。它堆积在前两排

以下是我目前的代码：

Menu.js

export const AddMenu = () => {
  const theadData = ["No", "Name", "Category", "Price"];
  const tbodyData = [
    {
      id: 1,
      items: [1, "Hamburger", "Fast Food", 150],
    },
    {
      id: 2,
      items: [2, "Pizza", "Fast Food", 100],
    },
  ];

  return (
    <div className="container">
      <h1>Add Menu</h1>
      <Table theadData={theadData} tbodyData={tbodyData} />
    </div>
  );
};

export const AddMenu=（）=>{
const theadadata=[“否”、“名称”、“类别”、“价格”]；
常数tbodyData=[
{
id:1，
项目：[1，“汉堡包”、“快餐”，150]，
},
{
id:2，
物品：[2，“比萨饼”，“快餐”，100]，
},
];
返回(
添加菜单
);
};

Table.js

export const Table = ({
  theadData,
  tbodyData,
}) => {
  return (
    <div className="table">
      <table>
        <thead>
          <tr>
            {theadData.map((item) => {
              return <th title={item}>{item}</th>;
            })}
          </tr>
        </thead>
          <tr>
            {tbodyData.map((item) => {
              return <td key={item}>{item.items}</td>;
            })}
          </tr>
        </tbody>
      </table>
    </div>
  );
};

导出常量表=({
阿达达，
tbodyData，
}) => {
返回(
{theadata.map（（项）=>{
返回{item}；
})}
{tbodyData.map（（项）=>{
返回{item.items}；
})}
);
};

---

谢谢，希望能得到答案。

添加第二个映射以循环行，然后循环单元格，如下所示：

{
tbodyData.map（（行，索引）=>(
{row.map（（项目）=>{
返回{item}；
})}
));
}