反応中の配列要素にアクセスできない

Question

サーバーから1人の学生のjsonデータを受信して​​います。ここで私は簡単にthis.state.info.Firstnameを得ることができますが、this.state.info.Father.Firstnameにアクセスすることはできません。私はこれにどのようにアクセスできますか？これは私のコードを反応さ

：

import React from 'react'; 
import axios from 'axios'; 

class Information extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state={ 
      info:' ' 
     } 
    } 

    componentDidMount(){ 
     let self = this; 
     axios.get('http://localhost:8080/studentById') 
      .then(function(data) { 
       //console.log(data); 
       self.setState({info:data.data}); 
      }); 
    } 

    render(){ 
     return(
      <div> 
       <pre> 
        <ul> 
        <li>{this.state.info.Firstname}</li> 
        <li>{this.state.info.Lastname}</li> 
        <li>{this.state.info.DateOfBirth}</li> 
        <li>{this.state.info.PlaceOfBirth}</li> 
        <li>{this.state.info.Age}</li> 
        <li>{this.state.info.Months}</li> 
        <li>{this.state.info.Nationality}</li> 
        <li>{this.state.info.MotherTongue}</li> 
        <li>{this.state.info.BloodGroup}</li> 
        <li>{this.state.info.Father.Firstname}</li>     
        </ul> 
       </pre> 
      </div>); 
    } 
} 
export default Information; 

は、これが私のJSONデータである：

{ _id: 5899b77c0ce1d10b723ab4ac, 
    Id: 92, 
    Firstname: 'Surya', 
    Age: 11, 
    Lastname: 'G', 
    DateOfBirth: '11-11-11', 
    PlaceOfBirth: 'Bangalore', 
    Months: 2, 
    Nationality: 'Indian', 
    MotherTongue: 'Kannada', 
    BloodGroup: 'B+ve', 
    ResidentialAddress: 'Vijayanagar 3rd cross, Bangalore', 
    EmergencyContactNumber: 
    { Address: 'SIT', 
    PhoneNo1: 1234, 
    PhoneNo2: 123455, 
    Relationship1: 'Uncle', 
    Relationship2: 'Aunty' }, 
    Mother: 
    { Firstname: 'Joe', 
    Lastname: 'S', 
    Occupation: 'Business', 
    PlaceOfWork: 'Bangalore', 
    OfficialAddress: 'Jayanagar', 
    EmailId: 'jjj@gmail.com', 
    PhoneNo: 12345, 
    MobileNo: 1234567890 }, 
    Father: 
    { Firstname: 'Chandra', 
    Lastname: 'S', 
    Occupation: 'Business', 
    PlaceOfWork: 'Bangalore', 
    OfficialAddress: 'BTM', 
    EmailId: 'cc@gmail.com', 
    PhoneNo: 12345, 
    MobileNo: 1234567890 } } 

Answer 1

理由は、あなたがた状態のinfo=''を定義し、serverからデータをフェッチ。 serverからデータを取得すると、infoの値が更新されます。 componentがmountedの後に呼び出された、componentDidMountメソッドのapi callを作成しています。 responseを取得する前に{this.state.info.Father.Firstname}をレンダリングしようとすると、そのときにinfoの値が''であるためerrorが投げられますので、renderメソッドにチェックを入れて、responseが得られるまで待つ必要があります。これは、それが動作します：

return(
    <div> 
     {this.state.info != '' ? 
      <pre> 
       <ul> 
       <li>{this.state.info.Firstname}</li> 
       <li>{this.state.info.Lastname}</li> 
       <li>{this.state.info.DateOfBirth}</li> 
       <li>{this.state.info.PlaceOfBirth}</li> 
       <li>{this.state.info.Age}</li> 
       <li>{this.state.info.Months}</li> 
       <li>{this.state.info.Nationality}</li> 
       <li>{this.state.info.MotherTongue}</li> 
       <li>{this.state.info.BloodGroup}</li> 
       <li>{this.state.info.Father.Firstname}</li> 
       </ul> 
      </pre> 
      : 
      null 
     } 
    </div> 
) 

Answer 2

を使用している情報の状態がオブジェクトである必要があり、あなたは文字列として使用され、問題を引き起こしている可能性があります。これを使ってみてください。残りのコードはすべて同じです。

` constructor(props){ 
     super(props); 
     this.state={ 
      info: { } 
     } 
    }`