javascript - 无法在 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=''，并从服务器获取数据。从服务器获取数据后，您将更新info值。您正在 componentDidMount 方法中进行 api 调用，该方法用于在组件成功安装后调用。当它尝试渲染 {this.state.info.Father.Firstname} 时，在您获得响应之前，它会抛出错误，因为此时 info 的值为 ''，因此需要在 render 方法中进行检查并等待，直到没有获取到响应，使用这个就可以了:

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>
)