从props中检索嵌套对象

问题描述 投票:0回答:1

我使用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>


)

Result of this code

javascript reactjs react-bootstrap-table
1个回答
0
投票

您的数据是对象的对象,而不是数组。因此,当您想要访问某个属性时,您需要使用['the_key']。在您的情况下,数据对象内的所有对象具有相同的值,例如TB,CAL, BOS...。因此,您可以做的是检索数据中某个对象的键,例如team对象。这将是一个包含每个索引一个键的数组。然后,如果你不知道数组中其中一个值的等级,你可以做this.data.rank[keysArray[0]]

我为您提供了一个工作示例,请仔细阅读TableComponent.js文件。

https://codesandbox.io/s/64xlk3rp9z

© www.soinside.com 2019 - 2024. All rights reserved.