React.js调用API后展示identifier报错，如何在页面正常显示？

这个问题我之前也碰到过，核心原因是异步数据加载的时机和初始state的结构不匹配导致的，我来给你一步步拆解解决方法：

问题分析 #

你的代码里，componentDidMount是在组件第一次渲染完成后才执行的，而fetch又是异步操作——也就是说：

1. 组件第一次render时，this.state.weathers还是你初始化的空对象{}
2. 这时候尝试访问this.state.weathers.cwbopendata.identifier，相当于在空对象里找cwbopendata，结果是undefined，再访问undefined.identifier就会抛出Cannot read properties of undefined的错误
3. 等fetch请求完成、setState更新后，组件会重新渲染，这时候cwbopendata才存在，访问identifier就没问题了

解决方法（三种可选，推荐第一种） #

1. 使用可选链操作符（?.）——最简洁的方案 #

ES2020引入的可选链操作符可以完美解决嵌套属性访问的报错问题，它会在属性不存在时自动返回undefined，而不是抛出错误。修改后的代码如下：

import React,{Component} from 'react';
class App extends Component {
  constructor(){
    super();
    this.state = {
      weathers: {},
    };
  }
  componentDidMount(){
    // 把变量名改成jsonData，避免和全局JSON对象冲突
    fetch('https://opendata.cwb.gov.tw/fileapi/v1/opendataapi/F-C0032-001?Authorization=CWB-BB78764B-9687-4C1C-B180-66CB616129E5&format=JSON')
    .then(response=> response.json())
    .then( jsonData=> this.setState({weathers: jsonData}))
  }
  render(){
    // 用可选链安全访问嵌套属性
    const identifier = this.state.weathers?.cwbopendata?.identifier;
    return (
      <div className="App">
        {/* 用短路求值确保只有identifier存在时才渲染元素 */}
        {identifier && <h3>Identifier: {identifier}</h3>}
      </div>
    );
  }
}
export default App;

2. 条件渲染——兼容性最好的方案 #

如果需要兼容不支持可选链的旧环境，可以用条件判断确保属性存在后再访问：

render(){
  const { weathers } = this.state;
  return (
    <div className="App">
      {weathers.cwbopendata && (
        <h3>Identifier: {weathers.cwbopendata.identifier}</h3>
      )}
    </div>
  );
}

3. 初始化state时预定义嵌套结构 #

你可以在constructor里把weathers的初始值设置成和API返回结构一致的空嵌套对象，这样第一次渲染时访问属性不会报错：

constructor(){
  super();
  this.state = {
    weathers: {
      cwbopendata: {}
    },
  };
}

这种方法的缺点是如果API返回的结构发生变化，你需要同步修改初始值，否则还是可能出现问题。

额外小建议 #

• 避免用JSON作为变量名，它是JavaScript的全局对象，可能会引发冲突，改成jsonData这类名字更安全
• 如果需要加载状态，可以在state里加个isLoading字段，在请求前后更新，给用户显示加载提示

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