Question

在使用react / redux的应用中，我向Google的Civic Api发出了GET请求，并收到了我添加到我州的以下对象：

＆＃13;

{
   "kind":"civicinfo#representativeInfoResponse",
   "normalizedInput":{
      "line1":"11111 Random Address Way",
      "city":"Germantown",
      "state":"MD",
      "zip":"20874"
   },
   "divisions":{
      "ocd-division/country:us/state:md/cd:6":{
         "name":"Maryland's 6th congressional district",
         "officeIndices":[
            0
         ]
      }
   },
   "offices":[
      {
         "name":"United States House of Representatives MD-06",
         "divisionId":"ocd-division/country:us/state:md/cd:6",
         "levels":[
            "country"
         ],
         "roles":[
            "legislatorLowerBody"
         ],
         "officialIndices":[
            0
         ]
      }
   ],
   "officials":[
      {
         "name":"John K. Delaney",
         "address":[
            {
               "line1":"1632 Longworth House Office Building",
               "city":"Washington",
               "state":"DC",
               "zip":"20515"
            }
         ],
         "party":"Democratic",
         "phones":[
            "(202) 225-2721"
         ],
         "urls":[
            "http://delaney.house.gov/"
         ],
         "photoUrl":"http://bioguide.congress.gov/bioguide/photo/D/D000620.jpg",
         "channels":[
            {
               "type":"Facebook",
               "id":"congressmanjohndelaney"
            },
            {
               "type":"Twitter",
               "id":"RepJohnDelaney"
            },
            {
               "type":"YouTube",
               "id":"repjohndelaney"
            }
         ]
      }
   ]
}

＆＃13;

我正在尝试访问＆＃34; name＆＃34;的值但我不能这样。我能够访问＆＃34; kind＆＃34;，＆＃34; division＆＃34;，＆＃34; offices＆＃34;，＆＃34; official＆＃34;我跑的时候：

const repObj = this.props.rep.officials
console.log(repObj);

但是当我尝试使用：

访问嵌套值时

当我这样做时.props.rep.officials [0] .name，

我收到错误：未捕获的TypeError：无法读取属性＆＃39; 0＆＃39;未定义的如何访问此值？

以下是我拨打电话的代码：

＆＃13;

export function getRep(){
  return function(dispatch){
    axios.get('https://www.googleapis.com/civicinfo/v2/representatives?key={apikeyremoved}&address=18910+porterfield+way+germantown+md+20874&levels=country&roles=legislatorLowerBody')
      .then(function(response){
        dispatch({type:"GET_REP", payload:response.data})
      })
      .catch(function(err){
        dispatch({type:"GET_REP_REJECTED", payload:err})
        console.log(err);
      })
  }
}

＆＃13;

我制作控制台日志的代码：

＆＃13;

class Rep extends React.Component{
  componentDidMount(){
    //Dispatch GET action
    this.props.getRep();
  }
  render(){
    const repObj = this.props.rep.officials[0].name
    console.log(repObj);
    return(
      <Well>
        <Row>
          <Col xs={12}>
            <h6>Rep name here</h6>
          </Col>
        </Row>
      </Well>
    )
  }
}

function mapStateToProps(state){
  return{
    rep:state.rep.rep
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({
    getRep:getRep,
    //all other actions here
  }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Rep);

＆＃13;

Answer 1

查看代码。请注意[]以及{}。

的存在

Officials是一个包含对象的数组。它不是一个普通的对象。

您必须首先访问代表该对象的数组的属性。

然后您可以访问该对象的属性。

this.props.rep.officials[0].name

注意：命名约定并使用数组表示可能有多个值（可能为零）。您可能希望使用循环而不是硬编码0。

Answer 2

由于officials是一个数组，this.props.rep.officials[0].name应该返回第一个obj的name属性。在官员。

在Javascript对象中访问嵌套值

2 个答案: