React无法读取Google Places API的open_now属性的问题咨询

嘿，这个报错我太熟了！咱们一步步来搞定它～

你碰到的TypeError: Cannot read property 'open_now' of undefined，说白了就是：你的代码直接去访问opening_hours的open_now属性，但有时候opening_hours本身是undefined——哪怕你后来能打印出它的完整内容，也可能是组件渲染时数据还没准备好导致的。

先看看你贴的代码：

render(){ 
 9 | let ob = this.props.data.opening_hours; 
> 10 | if(ob.open_now !== undefined){ 
11 | console.log(ob.open_now); 
12 | } 
13 | else{ 

为啥会出这问题？ #

大概率是你的this.props.data是通过异步请求获取的（比如调用接口拿数据），组件第一次渲染的时候，接口还没返回数据，this.props.data可能是null或者undefined，这时候ob = this.props.data.opening_hours就会变成undefined，再去访问ob.open_now自然就报错了。虽然之后数据加载完成，你能打印出opening_hours的完整内容，但第一次渲染的报错已经触发了。

给你两个靠谱的解决方案： #

方案一：用可选链/嵌套判断规避undefined

修改代码，先确认ob存在，再去访问open_now：

render(){ 
  // 用可选链操作符?.，环境支持的话推荐这个，写法简洁
  let ob = this.props.data?.opening_hours; 
  if(ob?.open_now !== undefined){ 
    console.log(ob.open_now); 
  } 
  else{
    // 这里可以写ob不存在或者open_now不存在时的逻辑
  }
}

如果你的项目环境不支持可选链，就用传统的嵌套判断：

render(){ 
  let ob = this.props.data && this.props.data.opening_hours; 
  if(ob && ob.open_now !== undefined){ 
    console.log(ob.open_now); 
  } 
  else{
    // 处理异常情况
  }
}

方案二：先确保数据加载完成再渲染

在组件渲染前先检查this.props.data是否存在，不存在的话返回加载状态，避免执行后续可能报错的逻辑：

render(){ 
  // 先判断数据是否加载完成
  if(!this.props.data){
    return <div>加载中...</div>;
  }
  
  let ob = this.props.data.opening_hours; 
  if(ob?.open_now !== undefined){ 
    console.log(ob.open_now); 
  } 
  else{
    // 其他处理逻辑
  }
  
  // 这里写组件正常渲染的JSX
}

内容的提问来源于stack exchange，提问作者benoit