时间戳

首页 > 解决方案 > 为什么数据没有显示在 react-bootstrap-table 中？

javascript - 为什么数据没有显示在 react-bootstrap-table 中？

问题描述

我想在 react-bootstrap-table 中显示原始数据。我在引导表中作为属性传递的数据在控制台中正确显示，但未在表中显示的行中显示。

我从中获取记录的功能。 

displayRecords = () => {
    var listAllRecords = this.props.data
    return (
    listAllRecords.map((listRecord,index) => {
        console.log(listRecord)
        listRecord.subData.map((singleData,index) => {
            console.log('singleData:' +index,singleData)
            return singleData.name
        })
    }) )
}

我想在其中显示这些记录的引导表。

<BootstrapTable ref='table' data={this.props.data}>
<TableHeaderColumn dataField='records' dataFormat={this.displayRecords}>Record</TableHeaderColumn>
</BootstrapTable>

的结果console.log(listRecord)

Table Row1: { 
subData: Array(2)
0: {id: 1, name: "data1"}
1: {id: 2, name: "data2"}
id: 2
image: null
name: "John"
}
Table Row2:{ 
subData: Array(3)
0: {id: 1, name: "data1"}
1: {id: 2, name: "data2"}
2: {id: 3, name: "data3"}
id: 3
image: null
name: "Doe"
}

singleData 的控制台日志

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}

singleData: 0 {id: 2, name: "data"}
singleData: 1 {id: 3, name: "data1"}
singleData: 2 {id: 4, name: "data1"}

PS：一共有三行记录。

所以，我想在表行中显示记录作为受尊重的行，就像在第一行中应该显示"data1, data2"的那样，在第二行中应该显示"data1,data2,data3"

标签： javascriptreactjs

解决方案

试试这行代码：- 1. 建立一个状态：-

this.state = {
     dataList:[]
}

2. 在 render() 函数中添加：-

<BootstrapTable data={dataList}>
    <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
</BootstrapTable>

3. 修改 displayRecords() 方法：-

displayRecords = () => {
        var listAllRecords = this.props.data
        listAllRecords.map((listRecord,index) => {
            console.log(listRecord)
            this.setState({
                 dataList: listRecord
            })
            listRecord.subData.map((singleData,index) => {
                console.log(singleData)            
                singleData.name
            })
        })
    }

推荐阅读