如何在react-bootstrap-table2中将嵌套的json传递给BootstrapTable

Question

我有一个表，当单击一行时，会显示另一行更多细节。 我正在使用reactJS和react-bootstrap-table2的BootstrapTable。

以下是我的json文件：

{
"persons": [{
    "id": 1,
    "name": "A",
    "email": "a@email.com",
    "contracts": [{
        "metric": "metric1",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    },{
        "metric": "metric2",
        "contract_detail": [{
            "cpm": 5,
            "country_code": "US"
        },{
            "cpm": 1,
            "country_code": "AU"
        }]
    }]
},
... ]}

以下是react-bootstrap-table2中的expandRow

renderer: row => (
            <div>
                <BootstrapTable
                    data={row.contracts}
                    columns={this.state.contract_columns}
                    keyField='id'
                    >
                    </BootstrapTable>
            </div>
        )

我希望只传递row.contracts因为数据将填充所有字段，但country_code和cpm字段为空。

我也尝试使用map和filter进行循环，但在这种情况下，没有显示任何表。

我是新的反应和js所以发现它很难调试。 任何帮助将不胜感激。 谢谢 ！

Answer 1

在嵌套Json的情况下，需要使用dataField，如下所示。 希望这可以帮助！

摘自文档

column.dataField（必需） - [String]使用dataField指定应在此列上应用的字段。 如果原始数据是嵌套的，例如：

const row = {id：'A001'，地址：{postal：'1234-12335'，city：'Chicago'}}您可以使用带有点（。）的dataField来描述嵌套对象：

dataField：'address.postal'dataField：'address.city'