Question

我正在使用axios从api获取数据。我的路由器是：

<Route exact path='/device/:id/update' render={(props) => <DeviceTypeUpdate {...props} />} />

我的componentDidMount是：

componentDidMount() {
  console.log('------this.props.match.id----', this.props.match.params.id)
  const ied = this.props.match.params.id
  axios({
    url: 'http://127.0.0.1:8000/api/devicetypeget/'+ied,
    method: 'get',
    headers: {
      'Content-Type' : 'application/json'
    }
  })
  .then(function(response) {
    return response;
  })
  .then(function (devicetype) {
    this.setState(function () {
      return {devicetype: devicetype, isLoaded: true}
    })
  }.bind(this))
  .catch(function (error) {
    this.setState(function () {
      return {error, isLoaded: true}
    })
  }.bind(this))
}

在我的渲染方法中，我尝试在控制台中记录数据，如下所示：

const {error, isLoaded, devicetype} = this.state
console.log('----error----', error);
console.log('----devicetype in render----', devicetype.data);

devicetype.data会打印出其中包含嵌套数据的JSON对象，如下所示：

assignment_date: {$date: 1548744545634}
device_elements: {type: "switch", name: "board", state: "some state"}
dev_stage: "PLANNING"
type_description: "some description"
type_name: "Board"
_id: 1

当我console.log（devicetype.data.device_elements）或任何其他属性时它引发错误"TypeError: Cannot read property 'type_name' of undefined"

我在做什么错。请帮助我

Answer 1

您需要先进行条件检查，然后才能访问嵌套对象，例如

   if(devicetype.data){
       console.log(devicetype.data.device_elements);
       console.log(devicetype.data.type_name);
   }

如何在ReactJS中获取嵌套的JSON数据

1 个答案: