尝试访问 Reactjs 中的嵌套对象时出错

Question

我正在从 API 检索 JSON 数据，然后将其存储在状态中，当我尝试使用this.state（例如我写this.state.DetailData.title）访问数据时，它工作正常，但是当我尝试访问this.state.DetailData.location.address同一对象的嵌套数据（例如）时，它会抛出我一个错误：

类型错误：无法读取未定义的属性“地址”

这是我的代码：

import React from 'react'
import Caro from './Carousel'
import {
  Container,
  Row,
  Col
} from 'reactstrap';


class Detail extends React.Component {
  constructor(props)

  {
    super(props)
    this.state = {
      DetailData: []
    }

  }




  componentDidMount() {

    fetch('https://api.kloh.in/kloh/external/v1/activity/AID180917200010526C8LFJ4MEIE9CWGXZG4', {
        method: 'GET'
      })
      .then((response) => response.json())
      .then((data) => {

        this.setState({
          DetailData: data.response
        })
        console.log(typeof(this.state.DetailData));

      })
  }




  render() {

    return ( 
    <div>

      <Caro / >

      <Container >
      <Row >
      <Col xs = "12" sm = {{size: 8, offset: 2 } md = {{size: 8, offset: 2}} >

      < div >
      <h1> {this.state.DetailData.title} <h1> 
      <h1> {this.state.DetailData.location.address} </h1>    {/*getting error here*/}
      <hr/>
      <h6> {this.state.DetailData.description} </h6>    

      </div>

      </Col>

      </Row> 
      </Container>

 
      </div>
    );



  }

}

export default Detail;

Answer 1

当组件被挂载时，你的数据还没有被获取，所以 this.state.DetailData 是一个空对象，而 this.state.DetailData.location 确实是未定义的。

要解决此问题，您可以尝试在显示之前检查对象是否存在。像这样的东西：

{this.state.DetailData.location ? this.state.DetailData.location.address : ""}

您还应该检查为什么在初始化组件时将 DetailData 定义为数组，但似乎期望的是一个对象。

this.state = {
  DetailData: [] // this should be DetailData: {} or DetailData: null
}