Javascript 带React的动态表

我正在尝试使用react呈现具有以下数据结构的动态表：

{
  numRows: 2,
  numCols: 3,
  cells: [
    {
      id: 1,
      pos: {
        row: 1,
        col: 1
      },
      content: 'This is the content 1'
    },
    {
      id: 2,
      pos: {
        row: 1,
        col: 2
      },
      content: 'This is the content 2'
    },
    {
      id: 3,
      pos: {
        row: 1,
        col: 3
      },
      content: 'This is the content 2.5'
    },
    {
      id: 4,
      pos: {
        row: 2,
        col: 1
      },
      content: 'This is the content 3'
    },
    {
      id: 5,
      pos: {
        row: 2,
        col: 3
      },
      content: 'This is the content 4'
    }
  ]
}

我认为这种数据结构最适合我的应用程序，因为用户可以按顺序编辑单元格，但如果有更好的方法，请让我知道

我有下面的逻辑将这些数据呈现到一个表中，但是它包含许多循环，所以我想知道是否有更好/更有效的方法来呈现这个数据结构

let rows = []

for (let row = 1; row <= numRows; row++) {
  let children = []

  for (let col = 1; col <= numCols; col++) {
    let hasCell = false
    cells.forEach((cell) => {
      if (cell.pos.row === row && cell.pos.col === col) {
        hasCell = true
        children.push(<Cell>{cell.content}</Cell>)
      }
    })

    if (!hasCell) {
      children.push(<Cell />)
    }
  }

  rows.push(<Row>{children}</Row>)

let rows=[]
对于（让row=1；row），表的结构是这里主要关注的问题

为了获得更好的解决方案，请尝试重新构造表数据

如果与
时间
相比
内存
不是一个问题，那么如何将
N^3
迭代减少到
N^2
迭代解决方案


var tableData={
总数：2，
numCols:3，
单元格：[
{
id:1，
pos:{
行：1，
上校：1
},
内容：“这是内容1”
},
{
id:2，
pos:{
行：1，
上校：2
},
内容：“这是内容2”
},
{
id:3，
pos:{
行：1，
上校：3
},
内容：“这是内容2.5”
},
{
id:4，
pos:{
第2排，
上校：1
},
内容：“这是内容3”
},
{
id:5，
pos:{
第2排，
上校：3
},
内容：“这是内容4”
}
]
};
函数createEmptyTable（行、列）{
var-arr=[]；
对于（变量i=0；i}
谢谢！N^2是一个很大的改进：）