Javascript React：映射和渲染分组行的表

我试图将以下数据映射并呈现到一系列分组表中，但我遇到了困难。谁能给我指出正确的方向

资料

我正在努力实现

    *Group 1*
    - Item 1
    - Item 2

    *Group 2*
    - Item 1
    - Item 2

我已经能够将标准数据集映射和渲染到单个表中，但是在使用分组元素时遇到困难

您可以使用创建groupBy util，并可能将其链接到阵列原型

Array.prototype.groupBy=functionkey{ 返回此。reducefunctiongroups，项目{ const val=项[键]； 组[val]=组[val]| |[]； 组[val].pushitem； 返回组； }, {}; }; 常数数据=[{ 群组：twitter， 记录：[{ _id:aMzJECeyvoLGdNzRM， 业主：K7xTxu7PRDCuhFZRC， 公司编号：1， coreURL:http://test88.com, 反馈：查尔斯 }, { _id:aMzJECeyvoLGdNzRM， 业主：K7xTxu7PRDCuhFZRC， 公司编号：1， coreURL:http://test99.com, 反馈：Gerry }] }, { 组别：linkedin， 记录：[{ _id:aMzJECeyvoLGdNzRM， 业主：K7xTxu7PRDCuhFZRC， 公司编号：1， coreURL:http://test88.com, 反馈：查尔斯 }, { _id:aMzJECeyvoLGdNzRM， 业主：K7xTxu7PRDCuhFZRC， 公司编号：1， coreURL:http://test99.com, 反馈：Gerry }] }] const groupedData=data.groupBy'group'；

---

console.loggroupedData 我设法用以下内容对其进行排序，并在RecordListDetail组件中呈现分组表的每一行：

groupedTables(){
return groupedData.map ((group, index) => {
  return (
    <div key={index}>
    <div>
      {group.group}
    </div>
    <Table striped bordered condensed hover>
      <tbody>
        {group.records.map ((details, index) =>
        <RecordListDetail
          key={index}
          details={details}
        />
        )}
      </tbody>
    </Table>
  </div>

---

您已经有一个包含两个组对象的数组，每个组对象中有两个项。你到底想实现什么？我想OP想要的是一个对象，而不是一个数组一种字典Tanks是的，我想数据的形状是正确的，但我试图在标题下构造一系列行。这最终将与状态相关联，这样当我改变状态改变分组属性时，例如，将在feedbackThank@Sag1v上分组，我已经看过lodash，但实际上我正在寻找一些实际示例，说明如何迭代数据集，并为每个类别创建一个表，或者可能创建一个包含组头的大表我很抱歉我误解了你的问题。我不知道你在问如何渲染数据，我以为你在问如何更改数据形状。没问题。谢谢，我已经将问题编辑得更清楚了好吧，分享呈现表格的代码，让我们知道哪些不适合你。

groupedTables(){
return groupedData.map ((group, index) => {
  return (
    <div key={index}>
    <div>
      {group.group}
    </div>
    <Table striped bordered condensed hover>
      <tbody>
        {group.records.map ((details, index) =>
        <RecordListDetail
          key={index}
          details={details}
        />
        )}
      </tbody>
    </Table>
  </div>