Reactjs 如何在材质ui的一行中插入多行

我试图在表的一行中添加多行 请看这里：

我也不知道为什么我的最后4个细胞会被放在桌面的“语言”里

这是我的密码：

<Paper className={classes.root}>
            <Table className={classes.table}>
              <TableHead>
                <TableRow>
                  <TableCell numeric>id</TableCell>
                  <TableCell>Actif</TableCell>
                  <TableCell>Payant</TableCell>
                  <TableCell>Langues</TableCell>
                  <TableCell>Noms</TableCell>
                  <TableCell>Image univers débloqué</TableCell>
                  <TableCell>Image univers bloqué</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
              {
                this.state.universes.map((item, i) => {
                  return (
                    <TableRow key={i}>
                    <TableCell numeric>{item.id}</TableCell>
                    <TableCell>{item.active?"Oui":"Non"}</TableCell>
                    <TableCell>{item.free?"Non":"Oui"}</TableCell>
                        {
                          item.Langs.map((item, y) => {
                            return (
                              <TableRow key={y}>
                                <TableCell>{item.lang}</TableCell>
                                <TableCell>{item.name}</TableCell>
                                <TableCell><img height="50" src={item.activeImage}/></TableCell>
                                <TableCell><img height="50" src={item.disabledImage}/></TableCell>
                              </TableRow>
                            )
                          })
                        }
                    </TableRow>
                  )
                })
              }
            </TableBody>
          </Table>
        </Paper>

身份证件
活动
佩扬特
语言
名字
布洛克图像世界酒店
布洛克图像世界酒店
{
this.state.universes.map（（项目，i）=>{
返回(
{item.id}
{item.active？“Oui”：“Non”}
{item.free？“Non”：“Oui”}
{
item.Langs.map（（item，y）=>{
返回(
{item.lang}
{item.name}
)
})
}
)
})
}

---

有人能帮我吗？

这样试试。使用if…else语句为要占用整列的单元格返回空表单元格。仍然不是完美的解决方案

      <TableBody>
        {orders.map(({ info, items }) => {
            return items.map((item, index) => {
              return (
                <TableRow key={index}>
                  {index === 0 ? (
                    <Fragment>
                      <TableCell>{info.id}</TableCell>
                      <TableCell>{info.user}</TableCell>
                    </Fragment>
                  ) : (
                    <Fragment>
                      <TableCell>{}</TableCell>
                      <TableCell>{}</TableCell>
                    </Fragment>
                  )}

                  <TableCell>{item.sth}</TableCell>
                  <TableCell>{item.else}</TableCell>
                </TableRow>
              );
            });
          })}
      </TableBody>

{orders.map（{info，items}）=>{
返回项目。映射（（项目，索引）=>{
返回(
{index==0(
{info.id}
{info.user}
) : (
{}
{}
)}
{item.sth}
{item.else}
);
});
})}

这很正常，因为您在TableCell语言上创建了一个新的表行。您必须显式地将单元格与上次发布的材质UI上不存在的单元格合并。。。