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

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

从您提供的代码看来，您似乎在数据第一次保存到状态之前就已经在访问数据了。因此，您试图从作为初始状态的空数组中获取 feel_like 值。

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

编辑：

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