[英]Why data not displaying in the react-bootstrap-table?
我想在 react-bootstrap-table 中顯示原始數據。 我在引導表中作為屬性傳遞的數據在控制台中正確顯示,但未在表中顯示的行中顯示。
我從中獲取記錄的 function。
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"
試試這行代碼:- 1. 制作一個 state:-
this.state = {
dataList:[]
}
2.在render()中添加這個function:-
<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
})
})
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.