Javascript 规范化重复状态

我正在尝试制作一个简单的表单生成器

假设我有一个画布，其中包含一些行，每一行都有一些列，在一个列中，它们将有输入本身

我的当前状态形状：

const state = {
  row: [{
    id: 1,
    created: '',
    col: [{ type: 'text' }, { type: 'tel' }],
  }, {
    id: 2,
    created: '',
    col: [{ type: 'number' }, { type: 'button' }],
  }],
};

使用上面的形状，我真的很难操纵数据。我已经读了这本书，但还是不懂。请通过规范化来帮助我找到此状态的最佳形状。任何帮助都将不胜感激

---

下面是一个快速演示，该数据将如何用于我的表单

redux状态可以展平。具有字段状态，每个字段都具有行索引和共索引

const state = {
  fields: [{
    id: 1,
    created: '',
    type: 'text',
    rowIndex: 0,
    colIndex: 0
  }, {
    id: 2,
    created: '',
    type: 'tel',
    rowIndex: 0,
    colIndex: 1
  }, {
    id: 3,
    created: '',
    type: 'number',
    rowIndex: 1,
    colIndex: 0 
  }, {
    id: 4,
    created: '',
    type: 'button',
    rowIndex: 1,
    colIndex: 1 
  }]
}

---

操作数据的困难是什么？看起来很直截了当。如果您想要一个简单的方法，请尝试一些不变性帮助程序：。通常，您必须对行进行切片，复制第n个对象，对列进行切片，并将项推送到columns数组。实际上，我已经使用该结构一段时间了，我还使用immutability helper来更新数据。但在某一点上，我觉得这个结构相当吓人，可以简化。这就是为什么我在寻找另一种解决方案，你可以根据字段将其展平，每个字段都有行和列索引。但这可能会使渲染有点复杂！你能给我举一个将数据展平的例子吗？感谢您尝试使用它，建议您规范化数据。