我已经使用redux从MongoDB数据库中提取了一个对象，并使用props将其传递到组件中。我能够控制台记录对象所在的位置，但无法检索对象内的任何信息。我的目标是从对象中获取一些信息，并使用react-bootstrap-table2进行显示。
这就是我从控制台日志中获得的信息
This is what is showing in the console
这就是我正在尝试的
import React, { Component } from 'react'
class CurrentTable extends Component {
componentDidMount() {
this.props.getItems();
}
render() {
const { items } = this.props.item;
console.log({ items });
const dig = this.props.item.items[0];
console.log(dig);
const columns = [{
dataField: 'items[0].team',
text: 'Team',
sort: true
}, {
dataField: 'item.current_Rank',
text: 'Current Rank',
sort: true
}, {
dataField: 'item.new_Rank',
text: '321 Rank',
sort: true
}];
return (
<BootstrapTable
keyField="team"
data={items}
columns={columns}
striped
hover />
)
}
}
CurrentTable.propTypes = {
getItems: PropTypes.func.isRequired,
item: PropTypes.object.isRequired
}
const mapStateToProps = (state) => ({
item: state.item
});
export default connect(mapStateToProps,{ getItems })(CurrentTable);
......... 更新的代码：
render() {
const { items } = this.props.item;
// console.log({ items });
const dig = this.props.item.items[0];
console.log(dig);
// react - bootstrap - table - next
const columns = [{
dataField: 'team',
text: 'Team',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.team)[rowIndex]
)
}, {
dataField: 'current_Rank',
text: 'Current Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.current_Rank)[rowIndex]
)
}, {
dataField: 'new_Rank',
text: '321 Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(row.new_Rank)[rowIndex]
)
}];
return (
<BootstrapTable
keyField="team"
data={items}
columns={columns}
striped
hover />
)
}
}
....数据：
{
"team": {
"TB": "Tampa Bay Lightning",
"CAL": "Calgary Flames",
"BOS": "Boston Bruins",
"WAS": "Washington Capitals",
"NYI": "New York Islanders",
"TOR": "Toronto Maple Leafs",
"SJ": "San Jose Sharks",
"NAS": "Nashville Predators",
"CAR": "Carolina Hurricanes",
"PIT": "Pittsburgh Penguins",
"WPG": "Winnipeg Jets",
"STL": "St. Louis Blues",
"CBJ": "Columbus Blue Jackets",
"MTL": "Montreal Canadiens",
"VGK": "Vegas Golden Knights",
"DAL": "Dallas Stars",
"COL": "Colorado Avalanche",
"PHO": "Arizona Coyotes",
"MIN": "Minnesota Wild",
"FLO": "Florida Panthers",
"PHI": "Philadelphia Flyers",
"CHI": "Chicago Blackhawks",
"ANA": "Anaheim Ducks",
"VAN": "Vancouver Canucks",
"EDM": "Edmonton Oilers",
"NYR": "New York Rangers",
"BUF": "Buffalo Sabres",
"NJD": "New Jersey Devils",
"DET": "Detroit Red Wings",
"LA": "Los Angeles Kings",
"OTT": "Ottawa Senators"
},
"wins": {
"TB": 62,
"CAL": 50,
"BOS": 49,
"WAS": 48,
"NYI": 48,
"TOR": 46,
"SJ": 46,
"NAS": 47,
"CAR": 46,
"PIT": 44,
"WPG": 47,
"STL": 45,
"CBJ": 47,
"MTL": 44,
"VGK": 43,
"DAL": 43,
"COL": 38,
"PHO": 39,
"MIN": 37,
"FLO": 36,
"PHI": 37,
"CHI": 36,
"ANA": 35,
"VAN": 35,
"EDM": 35,
"NYR": 32,
"BUF": 33,
"NJD": 31,
"DET": 32,
"LA": 31,
"OTT": 29
},
"loss": {
"TB": 16,
"CAL": 25,
"BOS": 24,
"WAS": 26,
"NYI": 27,
"TOR": 28,
"SJ": 27,
"NAS": 29,
"CAR": 29,
"PIT": 26,
"WPG": 30,
"STL": 28,
"CBJ": 31,
"MTL": 30,
"VGK": 32,
"DAL": 32,
"COL": 30,
"PHO": 35,
"MIN": 36,
"FLO": 32,
"PHI": 37,
"CHI": 34,
"ANA": 37,
"VAN": 36,
"EDM": 38,
"NYR": 36,
"BUF": 39,
"NJD": 41,
"DET": 40,
"LA": 42,
"OTT": 47
},
"overtime_Loss": {
"TB": 4,
"CAL": 7,
"BOS": 9,
"WAS": 8,
"NYI": 7,
"TOR": 8,
"SJ": 9,
"NAS": 6,
"CAR": 7,
"PIT": 12,
"WPG": 5,
"STL": 9,
"CBJ": 4,
"MTL": 8,
"VGK": 7,
"DAL": 7,
"COL": 14,
"PHO": 8,
"MIN": 9,
"FLO": 14,
"PHI": 8,
"CHI": 12,
"ANA": 10,
"VAN": 11,
"EDM": 9,
"NYR": 14,
"BUF": 10,
"NJD": 10,
"DET": 10,
"LA": 9,
"OTT": 6
},
"shoot_Out_Wins": {
"TB": 6,
"CAL": 0,
"BOS": 2,
"WAS": 4,
"NYI": 5,
"TOR": 0,
"SJ": 0,
"NAS": 4,
"CAR": 2,
"PIT": 2,
"WPG": 2,
"STL": 3,
"CBJ": 2,
"MTL": 3,
"VGK": 3,
"DAL": 1,
"COL": 2,
"PHO": 4,
"MIN": 1,
"FLO": 3,
"PHI": 3,
"CHI": 3,
"ANA": 3,
"VAN": 6,
"EDM": 3,
"NYR": 6,
"BUF": 5,
"NJD": 3,
"DET": 3,
"LA": 3,
"OTT": 0
},
"overtime_Wins": {
"TB": 7,
"CAL": 5,
"BOS": 9,
"WAS": 5,
"NYI": 6,
"TOR": 6,
"SJ": 8,
"NAS": 5,
"CAR": 5,
"PIT": 5,
"WPG": 7,
"STL": 6,
"CBJ": 8,
"MTL": 4,
"VGK": 4,
"DAL": 6,
"COL": 3,
"PHO": 5,
"MIN": 3,
"FLO": 7,
"PHI": 6,
"CHI": 9,
"ANA": 5,
"VAN": 7,
"EDM": 8,
"NYR": 3,
"BUF": 7,
"NJD": 4,
"DET": 9,
"LA": 6,
"OTT": 6
},
"true_Wins": {
"TB": 49,
"CAL": 45,
"BOS": 38,
"WAS": 39,
"NYI": 37,
"TOR": 40,
"SJ": 38,
"NAS": 38,
"CAR": 39,
"PIT": 37,
"WPG": 38,
"STL": 36,
"CBJ": 37,
"MTL": 37,
"VGK": 36,
"DAL": 36,
"COL": 33,
"PHO": 30,
"MIN": 33,
"FLO": 26,
"PHI": 28,
"CHI": 24,
"ANA": 27,
"VAN": 22,
"EDM": 24,
"NYR": 23,
"BUF": 21,
"NJD": 24,
"DET": 20,
"LA": 22,
"OTT": 23
},
"new_Record": {
"TB": "49-13-4-16",
"CAL": "45-5-7-25",
"BOS": "38-11-9-24",
"WAS": "39-9-8-26",
"NYI": "37-11-7-27",
"TOR": "40-6-8-28",
"SJ": "38-8-9-27",
"NAS": "38-9-6-29",
"CAR": "39-7-7-29",
"PIT": "37-7-12-26",
"WPG": "38-9-5-30",
"STL": "36-9-9-28",
"CBJ": "37-10-4-31",
"MTL": "37-7-8-30",
"VGK": "36-7-7-32",
"DAL": "36-7-7-32",
"COL": "33-5-14-30",
"PHO": "30-9-8-35",
"MIN": "33-4-9-36",
"FLO": "26-10-14-32",
"PHI": "28-9-8-37",
"CHI": "24-12-12-34",
"ANA": "27-8-10-37",
"VAN": "22-13-11-36",
"EDM": "24-11-9-38",
"NYR": "23-9-14-36",
"BUF": "21-12-10-39",
"NJD": "24-7-10-41",
"DET": "20-12-10-40",
"LA": "22-9-9-42",
"OTT": "23-6-6-47"
},
"points": {
"TB": 177,
"CAL": 152,
"BOS": 145,
"WAS": 143,
"NYI": 140,
"TOR": 140,
"SJ": 139,
"NAS": 138,
"CAR": 138,
"PIT": 137,
"WPG": 137,
"STL": 135,
"CBJ": 135,
"MTL": 133,
"VGK": 129,
"DAL": 129,
"COL": 123,
"PHO": 116,
"MIN": 116,
"FLO": 112,
"PHI": 110,
"CHI": 108,
"ANA": 107,
"VAN": 103,
"EDM": 103,
"NYR": 101,
"BUF": 97,
"NJD": 96,
"DET": 94,
"LA": 93,
"OTT": 87
},
"current_Points": {
"TB": 128,
"CAL": 107,
"BOS": 107,
"WAS": 104,
"NYI": 103,
"TOR": 100,
"SJ": 101,
"NAS": 100,
"CAR": 99,
"PIT": 100,
"WPG": 99,
"STL": 99,
"CBJ": 98,
"MTL": 96,
"VGK": 93,
"DAL": 93,
"COL": 90,
"PHO": 86,
"MIN": 83,
"FLO": 86,
"PHI": 82,
"CHI": 84,
"ANA": 80,
"VAN": 81,
"EDM": 79,
"NYR": 78,
"BUF": 76,
"NJD": 72,
"DET": 74,
"LA": 71,
"OTT": 64
},
"current_Rank": {
"TB": 1,
"CAL": 2.5,
"BOS": 2.5,
"WAS": 4,
"NYI": 5,
"TOR": 8,
"SJ": 6,
"NAS": 8,
"CAR": 11,
"PIT": 8,
"WPG": 11,
"STL": 11,
"CBJ": 13,
"MTL": 14,
"VGK": 15.5,
"DAL": 15.5,
"COL": 17,
"PHO": 18.5,
"MIN": 21,
"FLO": 18.5,
"PHI": 22,
"CHI": 20,
"ANA": 24,
"VAN": 23,
"EDM": 25,
"NYR": 26,
"BUF": 27,
"NJD": 29,
"DET": 28,
"LA": 30,
"OTT": 31
},
"new_Rank": {
"TB": 1,
"CAL": 2,
"BOS": 3,
"WAS": 4,
"NYI": 5.5,
"TOR": 5.5,
"SJ": 7,
"NAS": 8.5,
"CAR": 8.5,
"PIT": 10.5,
"WPG": 10.5,
"STL": 12.5,
"CBJ": 12.5,
"MTL": 14,
"VGK": 15.5,
"DAL": 15.5,
"COL": 17,
"PHO": 18.5,
"MIN": 18.5,
"FLO": 20,
"PHI": 21,
"CHI": 22,
"ANA": 23,
"VAN": 24.5,
"EDM": 24.5,
"NYR": 26,
"BUF": 27,
"NJD": 28,
"DET": 29,
"LA": 30,
"OTT": 31
},
"conference": {
"TB": "Eastern",
"CAL": "Western",
"BOS": "Eastern",
"WAS": "Eastern",
"NYI": "Eastern",
"TOR": "Eastern",
"SJ": "Western",
"NAS": "Western",
"CAR": "Eastern",
"PIT": "Eastern",
"WPG": "Western",
"STL": "Western",
"CBJ": "Western",
"MTL": "Eastern",
"VGK": "Western",
"DAL": "Western",
"COL": "Western",
"PHO": "Western",
"MIN": "Western",
"FLO": "Eastern",
"PHI": "Eastern",
"CHI": "Western",
"ANA": "Western",
"VAN": "Western",
"EDM": "Western",
"NYR": "Eastern",
"BUF": "Eastern",
"NJD": "Eastern",
"DET": "Eastern",
"LA": "Western",
"OTT": "Eastern"
},
"division": {
"TB": "Atlantic",
"CAL": "Pacific",
"BOS": "Atlantic",
"WAS": "Metropolitan",
"NYI": "Metropolitan",
"TOR": "Atlantic",
"SJ": "Pacific",
"NAS": "Central",
"CAR": "Metropolitan",
"PIT": "Metropolitan",
"WPG": "Central",
"STL": "Central",
"CBJ": "Metropolitan",
"MTL": "Atlantic",
"VGK": "Pacific",
"DAL": "Central",
"COL": "Central",
"PHO": "Western",
"MIN": "Central",
"FLO": "Atlantic",
"PHI": "Metropolitan",
"CHI": "Central",
"ANA": "Pacific",
"VAN": "Pacific",
"EDM": "Pacific",
"NYR": "Metropolitan",
"BUF": "Atlantic",
"NJD": "Metropolitan",
"DET": "Atlantic",
"LA": "Pacific",
"OTT": "Atlantic"
}
}
What is resulting on the frontend
........更新为代码2 .......
render() {
let items = this.props.item || {};
// console.log(items);
let dig = this.props.item.items[0] || {};
console.log(typeof(dig));
let teams = dig.team || {};
let current_Rank = dig.current_Rank || {};
let new_Rank = dig.new_Rank || {};
let new_Record = dig.new_Record || {};
let current_Points = dig.current_Points || {};
let points = dig.points || {};
let conference = dig.conference || {};
let division = dig.division || {};
// console.log(Object.values(teams));
// react - bootstrap - table - next
const columns = [
{
dataField: 'team',
text: 'Team',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(teams)[rowIndex]
)
}, {
dataField: 'current_Rank',
text: 'Current Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(current_Rank)[rowIndex]
)
}, {
dataField: 'new_Rank',
text: '321 Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(new_Rank)[rowIndex]
)
}, {
dataField: 'new_Record',
text: 'Record',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(new_Record)[rowIndex]
)
}, {
dataField: 'current_Points',
text: 'Current Point Total',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(current_Points)[rowIndex]
)
}, {
dataField: 'points',
text: 'New Point Total',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(points)[rowIndex]
)
}, {
dataField: 'conference',
text: 'Conference',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(conference)[rowIndex]
)
}, {
dataField: 'division',
text: 'Division',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(division)[rowIndex]
)
}];
return (
<Container>
<BootstrapTable
keyField="team"
data={dig}
columns={columns}
noDataIndication="Table is Empty"
striped
hover />
</Container>
)
.....更新4 ....
render() {
// let {items} = this.props.item || {};
// console.log({items});
const dig = this.props.item.items[0] || {};
console.log(dig);
let teams = dig.team || {};
let current_Ranks = dig.current_Rank || {};
let new_Ranks = dig.new_Rank || {};
let new_Records = dig.new_Record || {};
let current_Pointss = dig.current_Points || {};
let pointss = dig.points || {};
let conferences = dig.conference || {};
let divisions = dig.division || {};
// console.log(Object.values(teams));
// react - bootstrap - table - next
const columns = [
{
dataField: "teams",
text: 'Team',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(teams)[rowIndex]
)
}, {
dataField: 'current_Rank',
text: 'Current Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(current_Ranks)[rowIndex]
)
}, {
dataField: 'new_Rank',
text: '321 Rank',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(new_Ranks)[rowIndex]
)
}, {
dataField: 'new_Record',
text: 'Record',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(new_Records)[rowIndex]
)
}, {
dataField: 'current_Points',
text: 'Current Point Total',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(current_Pointss)[rowIndex]
)
}, {
dataField: 'points',
text: 'New Point Total',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(pointss)[rowIndex]
)
}, {
dataField: 'conference',
text: 'Conference',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(conferences)[rowIndex]
)
}, {
dataField: 'division',
text: 'Division',
sort: true,
formatter: (cellContent, row, rowIndex) => (
Object.values(divisions)[rowIndex]
)
}];
return (
<Container>
<BootstrapTable
keyField="team"
data={[dig]}
columns={columns}
striped
hover />
</Container>
)
答案 0 :(得分：0)
您的数据是对象的对象，而不是数组。因此，当您要访问属性时，需要使用['the_key']。
在您的情况下，数据对象内的所有对象都具有相同的值，例如TB,CAL, BOS...。
因此，您可以做的是检索数据内部对象之一的键，例如team对象。那将是一个在每个索引上包含一个键的数组。然后，如果您不知道数组中这些值之一的等级，则可以进行this.data.rank[keysArray[0]]。
我为您提供了一个有效的示例，请仔细阅读TableComponent.js文件。
