Javascript 从嵌套JSON获取属性

我使用react从嵌套的json属性中呈现数据。我在呈现未嵌套的属性（例如

'name'

和

'id'

）时没有问题，但是当涉及到获取嵌套的属性（例如

place:location{…}

等）时，它会说

“TypeError:无法读取未定义的属性'location'”

我的json格式如下所示：

data = [ {
  "end_time": "2015-03-28T21:00:00-0700",
  "name": "Brkn Intl. Bay Area Season 2!",
  "place": {
    "name": "MVMNT Studio",
    "location": {
      "city": "Berkeley",
      "country": "United States",
      "latitude": 37.85381,
      "longitude": -122.27875,
      "state": "CA",
      "street": "2973 Sacramento St",
      "zip": "94702"
    },
    "id": "459771574082879"
  },
  "start_time": "2015-03-28T15:00:00-0700" }, ...]

这是我的代码：

  class ResultBox extends Component {
    constructor(props){
    super(props);
    this.state = {
    posts: []
     };
  }
   componentDidMount() {
   axios.get('http://localhost:3001/api/events')
     .then(res => {
     let posts = res.data.map(obj => obj);
     this.setState({posts});
     console.log(posts);
    });

 }
  render() {
   return (
      this.state.posts.map(function(events){
        return <div className='result_box'>

       <p>{events.name}</p>
       <p>{events.place.location.city}</p> <----- This give me error!!!
       </div>
     })

  );
 }
}

类ResultBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
员额：[]
};
}
componentDidMount（）{
axios.get（）http://localhost:3001/api/events')
。然后（res=>{
让posts=res.data.map（obj=>obj）；
this.setState（{posts}）；
控制台日志（posts）；
});
}
render（）{
返回(
this.state.posts.map（函数（事件）{
返回
{events.name}

{events.place.location.city}
看起来并非所有的
事件
都定义了属性
place
。
您可以在每个组件上发出警告，也可以忽略并阻止渲染
未定义的值：

this.state.posts.map(events =>
  <div key={events.id} className='result_box'>
    <p>{events.name}</p>
    {events.place && <p>{events.place.location.city}</p>}
  </div>
)

this.state.posts.map（事件=>
{events.name}

{events.place&&{events.place.location.city}
}
)

Lodash的方法也可以帮助您：

<p>{get(events, 'place.location.city', '')}</p>

{get（事件，'place.location.city'，''）

看起来并不是所有的
事件都定义了属性
place
。
您可以在每个组件上发出警告，也可以忽略并阻止渲染
未定义的值：

this.state.posts.map(events =>
  <div key={events.id} className='result_box'>
    <p>{events.name}</p>
    {events.place && <p>{events.place.location.city}</p>}
  </div>
)

this.state.posts.map（事件=>
{events.name}

{events.place&&{events.place.location.city}
}
)

Lodash的方法也可以帮助您：

<p>{get(events, 'place.location.city', '')}</p>

{get（事件，'place.location.city'，''）

你能
控制台日志（事件）吗
在返回新的div并检查它是否有
事件之前
？在
json
中应该未定义一个
位置
。您可以打印所有的json并检查它。似乎您在数据方面有问题，而不是在代码方面。添加验证步骤，您将在I console.log中看到问题的来源（事件）它返回列表中的每个字典。你们认为这是因为我的一些数据没有位置/位置属性吗？是的，似乎有些数据不包含位置属性。你们能
console.log（事件）吗
在返回新的div并检查它是否有
事件之前
？在
json
中应该未定义一个
位置
。您可以打印所有的json并检查它。似乎您在数据方面有问题，而不是在代码方面。添加验证步骤，您将在I console.log中看到问题的来源（活动）它返回列表中的每个字典。你们认为这是因为我的一些数据没有位置属性吗？是的，似乎有些数据不包含位置属性。@kpo1不要忘记在
映射中的每个
div
中添加
键
属性。这非常重要，所以React知道哪些组件有e已添加、删除或修改：）@kpo1不要忘记在
map
中的每个
div
中添加
key
prop。这非常重要，因此React知道哪些组件已添加、删除或修改：）