无法访问react中的数组元素

Question

我正在从服务器接收单个学生的json数据。在这里我可以很容易地获得this.state.info.Firstname，但是我不能访问this.state.info.Father.Firstname。我如何访问它？？

这是我的react代码：

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值。您正在创建componentDidMount方法中的api call，该方法用于在component成功执行mounted之后调用。当它试图呈现{this.state.info.Father.Firstname}时，在你得到response之前，它抛出了error，因为当时info的值是''，所以你需要在render方法中放入一个check in，直到你没有得到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

您正在使用的信息状态应该是一个对象，您正在作为字符串使用，这可能是导致问题的原因。试着用这个。Rest所有代码保持不变。

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