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

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);

第一部分是在react组件之前首先出现的内容。我能够获取一个对象，然后创建一个返回另一个对象的变量（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密钥对我不起作用，文档提到它可能需要几个小时才能起作用，所以我无法为您测试。但是代码沙盒在渲染数据之前会检查数据是否存在。如果数据未初始化，它将呈现一些文本。希望这能有所帮助！