Question

我从服务器收到单个学生的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获取数据。从info获取数据后，您将更新server值。您在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>
)

Answer 2

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

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

无法访问反应中的数组元素

2 个答案: