react-table - 将多个单元格值分隔为行

Question

似乎无法弄清楚如何将我的数组分成单独的行，而不是全部出现在同一个单元格中。我有一个这样的数据结构：

[{Env: "DEV", Members: [John Doe, Jane Smith]}, {Env: "TEST", Members: [Joe Black, Sarah Niu]}]

我在主表上显示了 Env，而成员显示为子组件。但是，所有成员都显示在同一个单元格中。有没有办法让它们显示在单独的行中，还是我需要列出它们？例如 [{Env: DEV, Member: John Doe, Env: DEV, Member: Jane Smith}] 当前代码如下：

return (
    <div>
      <ReactTable
         data={this.props.data}
         columns={envColumn}
         className="-striped -highlight"
         defaultPageSize={10}
         SubComponent={row => 
           return (
              <ReactTable
                data={[row.original]}
                columns={memberColumn}
                defaultPageSize={3}
                showPagination={false}
               />
            )
         }}
       />
     </div>
 )

任何帮助深表感谢。

Answer 1

通过使用数据函数解决：

separateMembers(members) {
        var array = []
        members.forEach((item) => {
            array.push({ Member: item })
        })
        return array;
}