反应显示来自redux-form的多维数组

Question

我需要使用来自带有field arrays的redux-form的crud在表格中显示数据。 Reactjs最好的办法是什么？ 目前我正在使用react-table，但是无法使用父值获取子表格，它只会重复相同的值。有任何想法吗？感谢

此表的

table sample代码如下：

var result =  _.flatMap(items, item =>
  _(item.panel_group)
    .map(v => ({id: item._id,  inst_name:item.name, lat:item.lat, lon:item.lon, pv_name: v.name, azimuth: v.azimuth, inv_eff: v.inv_eff, losses: v.losses, system_capacity: v.system_capacity, tilt: v.tilt}))
    .value()
);

const columns2 = [
      {
        Header: "Pv Name",
         id:"pv_name",
         accessor:"pv_name"
       },
      {
        Header: "Size",
        id:"size",
        accessor:"system_capacity"
      },
      {
        Header: "losses",
        id: "losses",
        accessor: "losses"
      },
    ]



<div>
      <ReactTable
      data={items}
      columns={columns}
      defaultPageSize={5}
      filterable
      SubComponent={row => {
     return (
       <div style={{ padding: "20px" }}>
         <ReactTable
           data={result}
           columns={columns2}
           defaultPageSize={3}
           showPagination={false}
         />
       </div>
     );
   }}
    />
    </div>

我也尝试这样做，结果in picture ：

{
        Header: "Instalation Name",
        id:"name",
        accessor: "name"
      },
      {
        Header: "latitude",
        id: "latitude",
        accessor: "lat"
      },
      {
        Header: "longitude",
        id: "longitude",
        accessor: "lon"
      },
      {
        Header: "Pv Name",
         id:"pv_name",
         accessor:row => {
           return (
              <div>
                  {row.panel_group.map((panel) => (
                      <div key={panel.id}>{panel.name} </div>
                  ))}
              </div>
             )
           },
       },
      {
        Header: "Size",
        id:"size",
        accessor:row => {
          return (
             <span>
                 {row.panel_group.map((panel) => (
                     <div key={panel.id}>{panel.system_capacity}</div>
                 ))}
             </span>
            )
          },
      },

有没有更好的方法来表示这些数据？ 样本json

[

{
    "_id": "59e0cbdf438488010f84968d",
    "name": "hh",
    "lat": 12.33,
    "lon": -12.555,
    "panel_group": [
        {
            "installation_id": "test",
            "name": "name",
            "system_capacity": 2,
            "azimuth": 120,
            "tilt": 12,
            "losses": 4,
            "inv_eff": 98,
            "_id": "59e0cbdf438488010f84968f",
        },
        {
            "installation_id": "test2",
            "name": "name2",
            "system_capacity": 1,
            "azimuth": 110,
            "tilt": 11,
            "losses": 14,
            "inv_eff": 18,
            "_id": "59e0cbdf438488010f84968e"
        }
    ],
{
    "_id": "59e7798821306f001beeed19",
    "name": "installation1",
    "lat": 12.33,
    "lon": -12.555,
    "panel_group": [
        {
            "name": "panelgroup1",
            "system_capacity": 20,
            "azimuth": 120,
            "tilt": 12,
            "losses": 4,
            "inv_eff": 98,
            "_id": "59e7798821306f001beeed1b"
        },
        {
            "name": "panelgroup2",
            "system_capacity": 100,
            "azimuth": 110,
            "tilt": 11,
            "losses": 14,
            "inv_eff": 18,
            "_id": "59e7798821306f001beeed1a"
        }
    ],
}]