React类型错误：无法读取数组属性，调用时返回null

问题描述 #

this.state.setCity存储着城市天气信息，执行console.log(this.state.setCity)能正常输出天气数据对象，但执行console.log(this.state.setCity.main.temp)时会先抛出"无法读取null的main属性"之类的错误，不过最终控制台还是能打印出正确的温度值。

原因分析 #

这是因为天气数据是异步获取的：

1. 组件初始化时，this.state.setCity大概率是null或者未定义状态；
2. 组件首次渲染/执行日志代码时，异步请求还没完成，此时访问this.state.setCity.main.temp就会因为上层值为null报错；
3. 等异步请求完成，setCity状态更新后，组件重新渲染/日志代码再次执行，就能拿到正确的温度值。

解决方法 #

1. 使用可选链操作符安全访问（推荐）

ES2020+支持的可选链操作符可以自动处理空值情况，避免报错：

console.log(this.state.setCity?.main?.temp);

2. 提前做空值判断

用传统的条件判断确保属性存在后再访问：

if (this.state.setCity && this.state.setCity.main) {
  console.log(this.state.setCity.main.temp);
}

3. 初始化状态时设置默认结构

在组件构造函数里给setCity设置默认的嵌套结构，即使数据未加载也不会报错：

constructor(props) {
  super(props);
  this.state = {
    setCity: { main: { temp: null } }
  };
}

4. 仅在数据加载完成后执行日志

可以在组件生命周期钩子中判断状态更新后再执行：

componentDidUpdate(prevProps, prevState) {
  // 当setCity状态从无到有更新时，再打印温度
  if (!prevState.setCity && this.state.setCity) {
    console.log(this.state.setCity.main.temp);
  }
}

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