React中解构JSON对象后用点符号访问属性报错，如何解决？

我一眼就看出问题啦——这大概率是异步数据加载+组件初始状态未正确初始化导致的！

为什么会报错？ #

你通过解构拿到weather后，直接访问weather.name报错，但console.log(weather)却能看到完整对象，这是因为：

• 组件第一次渲染时，你的weather状态大概率是undefined或者空值（毕竟数据是从外部API异步获取的，初始还没拿到）。
• 而浏览器的console.log有个“小坑”：当你展开打印的对象时，它会显示对象的最新状态，但实际上执行console.log(weather)的那一刻，weather可能还没被赋值为完整的JSON对象。这时候你去访问weather.name，就相当于给undefined加.name，自然会抛出Cannot read properties of undefined (reading 'name')的错误。

具体解决方法 #

给你几个简单可行的方案，任选其一就行：

1. 初始化state时给weather设置默认空对象
   在组件的初始state里，把weather设为一个空对象，这样即使数据还没加载，访问weather.name只会得到undefined而不会报错：

   state = {
     weather: {} // 初始化为空对象
   }
   

2. 使用可选链操作符（推荐）
   ES6+的可选链可以安全地访问嵌套属性，只要前面的属性不存在，就会返回undefined而不报错：

   console.log(weather?.name)
   

3. 添加条件判断再访问
   在访问属性前先判断weather是否存在：

   if (weather) {
     console.log(weather.name)
   }
   // 或者用短路求值简化写法
   console.log(weather && weather.name)
   

这样就能解决你遇到的问题啦，以后处理异步加载的状态时，记得要考虑初始状态的情况哦～

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