如何在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'