無法訪問反應中的數組元素

我正在從服務器接收單個學生的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: '[email protected]', 
    PhoneNo: 12345, 
    MobileNo: 1234567890 }, 
    Father: 
    { Firstname: 'Chandra', 
    Lastname: 'S', 
    Occupation: 'Business', 
    PlaceOfWork: 'Bangalore', 
    OfficialAddress: 'BTM', 
    EmailId: '[email protected]', 
    PhoneNo: 12345, 
    MobileNo: 1234567890 } }

來源

2017-02-13 Abhilash Muttalli

如果使用'this.state.info.Father.Fullname'時出現任何錯誤？ –

yes..like我得到：不能讀取屬性'名字'的undefined –

原因是，你的狀態定義info=''，並從server獲取數據。從server獲取數據後，您正在更新info值。您正在使用componentDidMount方法中的api call，用於在component成功後調用mounted。當它試圖渲染{this.state.info.Father.Firstname}，你得到了response，它被扔error因爲info值''在那個時候，之前所以你需要把支票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> 
)

來源

2017-02-13 11:11:04

仍然得到同樣的錯誤 –

我定義'信息：'''，而不是像這樣定義它：'信息：'''或更改我使用的條件，像'{this.state.info！=''}'一樣使用它。在你在構造函數中定義的條件中使用相同的值。 –

謝謝兄弟。你能解釋笏是問題嗎？ –

您使用的應該是一個對象的信息狀態，您使用一個字符串，可能會導致該問題。嘗試使用這個。保持所有代碼保持不變。

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

來源

2017-02-15 05:35:26 Goutham

無法訪問反應中的數組元素

回答

相關問題