访问一个对象中的另一个对象返回无法读取未定义的属性

Question

我有一个微不足道的问题，但由于某种原因我无法解决。

我有一个对象，它是来自 API 的返回请求：

state = { 
data: []
}
componentDidMount() {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=${appkey}`)
.then(data => data.json())
// .then((data) => {
//  console.log(data);
// })
.then(data => this.setState({data}))
}

和：

render() {
const weather = this.state.data
console.log(weather.main);

第一部分是反应组件之前的第一部分。我能够获取一个对象，然后我创建一个返回另一个对象的变量(const(，在这种情况下：

{feels_like: 271.85
temp_min: 272.15
temp_max: 276.48
pressure: 1027
humidity: 97}

对于我的无知，奇怪的部分是，如果我尝试以这种方式访问例如第一个值 (feels_like(：

weather.main.feels_like

它将抛出一个错误，即无法读取未定义的属性"feels_like"。

现在，我尝试遍历对象，但它不起作用，我尝试使用不同的语法访问该属性，但仍然抛出错误。

我错过了什么吗？

目标是创建如下组件：

console.log(this.state.data);
const weather = this.state.data;
return (
<div>
<div key={weather.id}>
<h3>Library Product of the Week!</h3>
<h4>{weather.name}</h4>
<h4>{weather.main.temp}</h4>
<h4>{weather.main.feels_like}</h4>
<h4>{weather.main.temp_min}</h4>
<h4>{weather.main.temp_max}</h4>
<h4>{weather.main.pressure}</h4>
<h4>{weather.main.humidity}</h4>
</div>
</div>
)
}

这就是整个代码：

import React from 'react'
import { render } from 'react-dom'
const appkey = 'xx';
class Message extends React.Component {
state = { 
data: []
}
componentDidMount() {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&appid=${appkey}`)
.then(data => data.json())
// .then((data) => {
//  console.log(data);
// })
.then(data => this.setState({data}))
}
componentDidUpdate() {
console.log("The component just updated")
}
render() {
console.log(this.state.data);
const weather = this.state.data;
return (
<div>
<div key={weather.id}>
<h3>Library Product of the Week!</h3>
<h4>{weather.name}</h4>
<h4>{weather.main.temp}</h4>
<h4>{weather.main.feels_like}</h4>
<h4>{weather.main.temp_min}</h4>
<h4>{weather.main.temp_max}</h4>
<h4>{weather.main.pressure}</h4>
<h4>{weather.main.humidity}</h4>
</div>
</div>
)
}
}
render(
<Message />, 
document.getElementById('root')
)

Answer 1

从您提供的代码来看，您似乎已经在访问数据，然后才首次将其保存到状态。因此，您正在尝试从空数组中获取feels_like值，这是您的初始状态。

为了修复它，您应该在渲染方法中使用数据之前检查数据是否存在

编辑：

由于某种原因，API 密钥对我不起作用，文档提到它可能需要几个小时才能工作，所以我无法为您测试。但是代码沙箱会在呈现数据之前检查数据是否存在。如果数据未初始化，它将呈现一些文本。希望这有帮助！